資訊專欄INFORMATION COLUMN
摘要：預(yù)覽因?yàn)轫?xiàng)目是基于做的，本身就提供了的預(yù)覽組件，使用起來也簡單，如果業(yè)務(wù)需求需要放大縮小，這個組件就不滿足了。
需求分析
業(yè)務(wù)要求，需要一個圖片上傳控件，需滿足
多圖上傳
點(diǎn)擊預(yù)覽
圖片前端壓縮
支持初始化數(shù)據(jù)
相關(guān)功能及資源分析基本功能
先到https://www.npmjs.com/search?q=vue+upload上搜索有關(guān)上傳的控件，沒有完全滿足需求的組件，過濾后找到 vue-upload-component 組件，功能基本都有，自定義也比較靈活，就以以此進(jìn)行二次開發(fā)。
預(yù)覽
因?yàn)轫?xiàng)目是基于 vant 做的，本身就提供了 ImagePreview 的預(yù)覽組件，使用起來也簡單，如果業(yè)務(wù)需求需要放大縮小，這個組件就不滿足了。
壓縮
可以通過 canvas 相關(guān)api來實(shí)現(xiàn)壓縮功能，還可以用一些第三方庫來實(shí)現(xiàn), 例如image-compressor.js
數(shù)據(jù)
因?yàn)楸韱雾撁嫔婕熬庉嫷那闆r，上傳組件為了展示優(yōu)雅點(diǎn)，需要做點(diǎn)處理。首先就先要對數(shù)據(jù)格式和服務(wù)端進(jìn)行約定，然后在處理剩下的
需求和實(shí)現(xiàn)思路基本確定，開始進(jìn)入編碼，先搭建可運(yùn)行可測試的環(huán)境
第一步，創(chuàng)建相關(guān)目錄
|- components
|- ImageUpload
|- ImageUpload.vue
|- index.js
第二步，安裝依賴
$ npm i image-compressor.js -S $ npm i vue-upload-component -S
第三步，編寫核心主體代碼
// index.js import ImageUpload from "./ImageUpload" export default ImageUpload
// ImageUpload.vue{{ file.progress }} %
正在上傳
上傳失??！
圖片壓縮也可以自己來實(shí)現(xiàn)，主要是理清各種文件格式的轉(zhuǎn)換
compress(imgFile) {
let _this = this
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = e => {
let img = new Image()
img.src = e.target.result
img.onload = () => {
let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")
canvas.width = img.width
canvas.height = img.height
// 鋪底色
ctx.fillStyle = "#fff"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, img.width, img.height)
// 進(jìn)行壓縮
let ndata = canvas.toDataURL("image/jpeg", 0.3)
resolve(_this.dataURLtoFile(ndata, imgFile.name))
}
}
reader.onerror = e => reject(e)
reader.readAsDataURL(imgFile)
})
}
// base64 轉(zhuǎn) Blob
dataURLtoBlob(dataurl) {
let arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},
// base64 轉(zhuǎn) File
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {type: mime})
}
最終效果
vue-upload-component 文檔
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/98405.html
摘要：前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
閱讀 3467·2021-09-22 15:01
閱讀 588·2019-08-30 11:11
閱讀 1040·2019-08-29 16:17
閱讀 1265·2019-08-29 12:23
閱讀 2081·2019-08-26 11:48
閱讀 3234·2019-08-26 11:48
閱讀 1480·2019-08-26 10:33
閱讀 2003·2019-08-26 10:30
