成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮

zorro / 1679人閱讀

摘要：我用做狀態(tài)管理，七牛云做圖床。關(guān)于該組件的其他用法可以在的官方文檔查閱上傳對圖片進(jìn)行壓縮壓縮圖片的質(zhì)量對圖片進(jìn)行壓縮壓縮圖片實(shí)現(xiàn)起來比較簡單。前端向后端請求上傳。

我用vuex做狀態(tài)管理，七牛云做圖床。

項(xiàng)目地址：多圖片上傳組件

效果展示

項(xiàng)目執(zhí)行流程

首先，讓我們來分析一下實(shí)現(xiàn)多圖片上傳的流程：

前端向后端請求用來上傳圖片至服務(wù)器的token

后端為每張要上傳的圖片生成一個(gè)圖片名，并用這個(gè)圖片名生成token

后端將圖片名和token返回給前端

前端拿到token以后，將圖片上傳至服務(wù)器

上傳成功以后，前端將圖片名發(fā)給后端

后端將圖片名存入數(shù)據(jù)庫

項(xiàng)目實(shí)現(xiàn)過程

1.我們要利用element-ui的Upload組件布置界面：

//upload.vue

domain 指的是我們的上傳地址，upqiniu 是我們自定義的上傳方法，beforeUpload 是圖片上傳前執(zhí)行的方法。關(guān)于該組件的其他用法可以在element的官方文檔查閱：Upload 上傳

2.對圖片進(jìn)行壓縮

// upload.vue
imgQuality: 0.5, //壓縮圖片的質(zhì)量

dataURItoBlob(dataURI, type) {
  var binary = atob(dataURI.split(",")[1]);
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: type});
},

beforeUpload(param) {
  //對圖片進(jìn)行壓縮
  const imgSize = param.size / 1024 / 1024
  if(imgSize > 1) {
    const _this = this
    return new Promise(resolve => {
      const reader = new FileReader()
      const image = new Image()
      image.onload = (imageEvent) => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        const width = image.width * _this.imgQuality
        const height = image.height * _this.imgQuality
        canvas.width = width;
        canvas.height = height;
        context.clearRect(0, 0, width, height);
        context.drawImage(image, 0, 0, width, height);
        const dataUrl = canvas.toDataURL(param.type);
        const blobData = _this.dataURItoBlob(dataUrl, param.type);
        resolve(blobData)
      }
      reader.onload = (e => { image.src = e.target.result; });
      reader.readAsDataURL(param);
    })
  }
}

壓縮圖片實(shí)現(xiàn)起來比較簡單。就是在beforeUpload()方法里面return一個(gè)Promise，Promise里面我們把圖片的長度和寬度按比例進(jìn)行縮小，并把圖片畫到canvas上，然后把canvas轉(zhuǎn)成一個(gè)blod對象。

3.前端向后端請求上傳token。

//upload.vue
upqiniu(param) {
  let filetype = ""
  if (param.file.type === "image/png") {
    filetype = "png"
  } else {
    filetype = "jpg"
  }
  const formdata = {
    filetype: filetype,
    param: param
  }
  this.actionGetUploadToken(formdata)        
}

// vuex/action.js
actionGetUploadToken({commit}, obj) {
  const msg = {
    filetype: obj.filetype
  }
  usersApi.getImgUploadToken(msg).then((response) => {
    if(response.stateCode === 200) {
      commit("uploadImg", {"token": response.token, "key": response.key, "param": obj.param})
    } 
  }, (error) => {
    console.log(`獲取圖片上傳憑證錯(cuò)誤：${error}`)
    commit("uploadImgError")
  })
},

4.后端生成上傳token，并發(fā)給前端，我用Python實(shí)現(xiàn)。

filetype = data.get("filetype")
# 構(gòu)建鑒權(quán)對象
q = Auth(configs.get("qiniu").get("AK"), configs.get("qiniu").get("SK"))

# 生成圖片名
salt = "".join(random.sample(string.ascii_letters + string.digits, 8))
key = salt + "_" + str(int(time.time())) + "." + filetype

# 生成上傳 Token，可以指定過期時(shí)間等
token = q.upload_token(configs.get("qiniu").get("bucket_name"), key, 3600)
return Response({"stateCode": 200, "token": token, "key": key}, 200)

5.前端接收token，開始向服務(wù)器上傳圖片

// vuex/state.js
imgName: [], //圖片名數(shù)組

// vuex/mutations.js
uploadImg(state, msg) {
  const config = {
    useCdnDomain: true,
    region: qiniu.region.z2
  }
  var putExtra = {
    fname: msg.param.file.name,
    params: {},
    mimeType: ["image/png", "image/jpeg", "image/gif"]
  };
  var observer = {
    next(res){

    },
    error(err){
      console.log(`圖片上傳錯(cuò)誤信息：${err.message}`)
    }, 
    complete(res){
      console.log(`圖片上傳成功：${res.key}`)
      state.imgName.push(res.key)
    }
  }
  var observable = qiniu.upload(msg.param.file, msg.key, msg.token, putExtra, config)
  //上傳開始
  var subscription = observable.subscribe(observer)
},

6.上傳成功以后，將圖片名存入數(shù)據(jù)庫

// 用到upload.vue的界面
this.imgsList = this.imgName.map(key => `http://${this.qiniuaddr}/${key}`)
switch(this.imgsList.length) {
  case 4:
  this.img4 = this.imgsList[3]
  case 3:
  this.img3 = this.imgsList[2]
  case 2:
  this.img2 = this.imgsList[1]
  case 1:
  this.img1 = this.imgsList[0]
}
let obj = {
  goods_img1: this.img1,
  goods_img2:this.img2,
  goods_img3:this.img3,
  goods_img4:this.img4
}
//將信息發(fā)送給后端
this.actionPublish(obj)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/43172.html

相關(guān)文章

  • element 上傳組件 el-upload 的經(jīng)驗(yàn)總結(jié)

    摘要：正文上傳圖片到七牛云這個(gè)需要前后端的配合才能實(shí)現(xiàn)，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進(jìn)度值谷歌找到的其一谷歌找到的其二完 前言 最近在做后臺(tái)管理項(xiàng)目，采用的 vue-element-admin ，上傳圖片是一個(gè)很常用的功能，也遇到了很多問題，剛好趁此機(jī)會(huì)做一些總結(jié)。 初步總結(jié)下會(huì)提到的問題，目錄如下： el-upload 自定義上傳方法 圖片上傳到七牛云 圖片壓縮后再上傳（...

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

  • Element-ui實(shí)現(xiàn)合并多圖上傳（一次請求多張圖片）

    摘要：實(shí)現(xiàn)多圖上傳主要用到以下兩個(gè)屬性是自帶多圖上傳的，但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實(shí)現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實(shí)質(zhì)是進(jìn)行多次請求在上傳事件觸發(fā)后，多圖上傳的默認(rèn)實(shí)現(xiàn)調(diào)用了三次請求。 前言 工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。 環(huán)境： Springboot+Vue+Element-ui 正文 這次上傳使用的是Elem...

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

  • 前端臨床手札——文件上傳

    摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計(jì)是簡單易入門，但是實(shí)際工作時(shí)就會(huì)發(fā)現(xiàn)上傳文件這個(gè)功能上是簡單的，邏輯上卻比較復(fù)雜。 先說一下需求和功能點(diǎn)： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...

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

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

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

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

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

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

0條評(píng)論

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