這篇文章主要介紹了vue-upload-component如何封裝一個圖片上傳組件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，創(chuàng)新互聯(lián)建站面向各種領域：PVC花箱等網(wǎng)站設計、全網(wǎng)營銷推廣解決方案、網(wǎng)站設計等建站排名服務。

需求分析

業(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ù)格式和服務端進行約定，然后在處理剩下的

開發(fā)

需求和實現(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 

圖片壓縮也可以自己來實現(xià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 轉 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 轉 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如何封裝一個圖片上傳組件”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!