国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wangbjun / 596人閱讀

摘要：預(yù)覽因?yàn)轫?xiàng)目是基于做的，本身就提供了的預(yù)覽組件，使用起來也簡(jiǎn)單，如果業(yè)務(wù)需求需要放大縮小，這個(gè)組件就不滿足了。

需求分析

業(yè)務(wù)要求，需要一個(gè)圖片上傳控件，需滿足

多圖上傳

點(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ù)覽組件，使用起來也簡(jiǎn)單，如果業(yè)務(wù)需求需要放大縮小，這個(gè)組件就不滿足了。

壓縮
可以通過 canvas 相關(guān)api來實(shí)現(xiàn)壓縮功能，還可以用一些第三方庫(kù)來實(shí)現(xiàn), 例如image-compressor.js

數(shù)據(jù)
因?yàn)楸韱雾?yè)面涉及編輯的情況，上傳組件為了展示優(yōu)雅點(diǎn)，需要做點(diǎn)處理。首先就先要對(duì)數(shù)據(jù)格式和服務(wù)端進(jìn)行約定，然后在處理剩下的

開發(fā)

需求和實(shí)現(xiàn)思路基本確定，開始進(jìn)入編碼，先搭建可運(yùn)行可測(cè)試的環(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

圖片壓縮也可以自己來實(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98405.html

相關(guān)文章

  • 【收藏】2019年最新Vue相關(guān)精品開源項(xiàng)目庫(kù)匯總

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

    williamwen1986 評(píng)論0 收藏0

  • 第三方庫(kù)

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

    seanHai 評(píng)論0 收藏0

  • 第三方庫(kù)

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

    gityuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<