資訊專欄INFORMATION COLUMN
摘要：預覽因為項目是基于做的，本身就提供了的預覽組件，使用起來也簡單，如果業(yè)務需求需要放大縮小，這個組件就不滿足了。
需求分析
業(yè)務要求，需要一個圖片上傳控件，需滿足
多圖上傳
點擊預覽
圖片前端壓縮
支持初始化數(shù)據(jù)
相關功能及資源分析基本功能
先到https://www.npmjs.com/search?q=vue+upload上搜索有關上傳的控件，沒有完全滿足需求的組件，過濾后找到 vue-upload-component 組件，功能基本都有，自定義也比較靈活，就以以此進行二次開發(fā)。
預覽
因為項目是基于 vant 做的，本身就提供了 ImagePreview 的預覽組件，使用起來也簡單，如果業(yè)務需求需要放大縮小，這個組件就不滿足了。
壓縮
可以通過 canvas 相關api來實現(xiàn)壓縮功能，還可以用一些第三方庫來實現(xiàn), 例如image-compressor.js
數(shù)據(jù)
因為表單頁面涉及編輯的情況，上傳組件為了展示優(yōu)雅點，需要做點處理。首先就先要對數(shù)據(jù)格式和服務端進行約定，然后在處理剩下的
需求和實現(xiàn)思路基本確定，開始進入編碼，先搭建可運行可測試的環(huán)境
第一步，創(chuàng)建相關目錄
|- 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 }} %
正在上傳
上傳失??！
圖片壓縮也可以自己來實現(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)
// 進行壓縮
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 文檔
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98405.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
閱讀 3410·2021-09-22 15:01
閱讀 535·2019-08-30 11:11
閱讀 965·2019-08-29 16:17
閱讀 1218·2019-08-29 12:23
閱讀 2036·2019-08-26 11:48
閱讀 3189·2019-08-26 11:48
閱讀 1427·2019-08-26 10:33
閱讀 1938·2019-08-26 10:30
