介紹

vue-core-image-upload 是一款輕量級(jí)的 Vue.js 上傳插件，它可以支持的圖片的上傳，裁剪，壓縮。它同樣也支持在移動(dòng)端的圖片處理，它定義了諸多上傳周期，你可以自由的進(jìn)行流程控制。

---

---

Github

https://github.com/Vanthink-UED/vue-core-image-upload

安裝

npm install vue-core-image-upload --save

安裝完成后，編輯源碼

基本屬性

Vue-core-image-upload 提供了很多可配置的選項(xiàng)，從而希望盡可能的滿足開發(fā)者的需求。

響應(yīng)事件

我們?cè)谏蟼鞯牟煌A段指定了不同的派發(fā)事件，你可以綁定每個(gè)事件的響應(yīng)方法，實(shí)現(xiàn)對(duì)于流程的控制。

• imageuploaded

當(dāng)圖片上傳完，會(huì)調(diào)用該事件綁定的函數(shù)，并且用戶可以獲取到服務(wù)端返回的數(shù)據(jù)。

• imagechanged

當(dāng)input框改變選擇圖片時(shí)候觸發(fā)，會(huì)返回input的獲取的圖片數(shù)據(jù)

• imageuploading

當(dāng)圖片上傳過程中觸發(fā)，你可以自定義你需要處理的內(nèi)容比如顯示加載動(dòng)畫等。

• errorhandle

當(dāng)圖片上傳發(fā)生錯(cuò)誤的時(shí)候觸發(fā)，會(huì)返回錯(cuò)誤狀態(tài)信息

methods: { imagechanged() { this.step += 1; }, imageuploading() { this.step += 1; }, imageuploaded(res) { this.step += 1; this.src = res.data.src; } }

自定義組件樣式

你可以設(shè)置組件的class 以及自己編寫子組件的形式來控制組件的顯示的樣子。

裁剪圖片

你可以通過設(shè)置 crop，來實(shí)現(xiàn)圖片的裁剪。你可以指定圖片裁剪的寬高，以及它的最大寬度和高度這些參數(shù)。

設(shè)置 cropRatio來限制裁剪圖片的形狀，需要字符串的格式(1:1 或者2:3這種比例形式)，當(dāng)然你可以設(shè)置為 auto 則不限制裁剪框的形狀。

設(shè)置圖片裁剪后，批量上傳將不再生效。

圖片裁剪完有兩種選擇，選擇本地裁剪local或者服務(wù)端裁剪 server。

• 本地裁剪

你可以將 crop 設(shè)置為 local 來實(shí)現(xiàn)本地裁剪。本地裁剪完成后發(fā)送給服務(wù)端接口的圖片便是已經(jīng)裁剪好的圖片。

• 服務(wù)端裁剪

服務(wù)端裁剪是指將原圖片和裁剪的參數(shù)一起發(fā)給后端，方便服務(wù)端保存原圖，以及對(duì)原圖的其他操作，而服務(wù)端能夠接收到post的參數(shù)如下:

調(diào)整圖片

你可以設(shè)置 resize 來進(jìn)行圖片的縮放。

設(shè)置resize="local" 意味著圖片的縮放將在本地進(jìn)行。發(fā)給服務(wù)端的將會(huì)是大小調(diào)整完畢的后的圖片。

上傳多個(gè)文件

• multiple

你可以使用 multiple 屬性設(shè)置為true來實(shí)現(xiàn)多文件的上傳。需要注意的是，你設(shè)置了該屬性后,服務(wù)端收到文件上傳的字段數(shù)據(jù)會(huì)是一個(gè)數(shù)組。

• multiple-size

你可以使用multiple-size來限制圖片的數(shù)量，你可以限制上傳文件的數(shù)量。

壓縮圖片

設(shè)置compress的數(shù)值，你可以在上傳之前進(jìn)行圖片的本地壓縮。其中 compress 為 0 表示不壓縮，數(shù)據(jù)越大，圖片的質(zhì)量越差，且最大值不能大于100。

向服務(wù)端發(fā)送數(shù)據(jù)

你可以設(shè)置data 來將一些附帶的數(shù)據(jù)發(fā)送給服務(wù)端。 當(dāng)然你也可以將一些數(shù)據(jù)包含在 header 中傳遞過去，你只需要綁定到 header即可。

總結(jié)

以上是生活随笔為你收集整理的.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。