基于 vue-upload-component 封裝一個圖片上傳組件

wangbjun 發布于2019-08-23 12:22 / 603人閱讀

摘要：預覽因為項目是基于做的，本身就提供了的預覽組件，使用起來也簡單，如果業務需求需要放大縮小，這個組件就不滿足了。

需求分析

業務要求，需要一個圖片上傳控件，需滿足

多圖上傳

點擊預覽

圖片前端壓縮

支持初始化數據

相關功能及資源分析

基本功能
先到https://www.npmjs.com/search?q=vue+upload上搜索有關上傳的控件，沒有完全滿足需求的組件，過濾后找到 vue-upload-component 組件，功能基本都有，自定義也比較靈活，就以以此進行二次開發。

預覽
因為項目是基于 vant 做的，本身就提供了 ImagePreview 的預覽組件，使用起來也簡單，如果業務需求需要放大縮小，這個組件就不滿足了。

壓縮
可以通過 canvas 相關api來實現壓縮功能，還可以用一些第三方庫來實現, 例如image-compressor.js

數據
因為表單頁面涉及編輯的情況，上傳組件為了展示優雅點，需要做點處理。首先就先要對數據格式和服務端進行約定，然后在處理剩下的

開發

需求和實現思路基本確定，開始進入編碼，先搭建可運行可測試的環境

第一步，創建相關目錄

|- 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

圖片壓縮也可以自己來實現，主要是理清各種文件格式的轉換

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 文檔

GPU云服務器云服務器 html圖片上傳組件 jsp 圖片上傳組件 asp圖片無組件上傳如何封裝html組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98405.html

【收藏】2019年最新Vue相關精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...

williamwen1986 2019-08-23 14:50 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評論0 收藏0