Vue.js實現(xiàn)文件上傳壓縮優(yōu)化處理技巧

更新時間：2022年11月26日 15:46:33 作者：船長在船上

這篇文章主要介紹了Vue.js實現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實現(xiàn)，本文給大家介紹的非常詳細需要的朋友可以參考下

vue js實現(xiàn)文件上傳壓縮優(yōu)化處理

兩種方法：

第1種是借助canvas的封裝的文件壓縮上傳
第2種（擴展方法）使用compressorjs第三方插件實現(xiàn)

下面來詳細介紹兩種方法：

借助canvas的封裝的文件壓縮上傳

封裝之前，先要對canvas相關的方法有所了解

<canvas>簡單實例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 標簽通常需要指定一個id屬性 (或者其他), width 和 height 屬性定義的畫布的大小.

使用 style 屬性來添加邊框:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

1.新建imgUpload.js

將base64轉換為file文件

const dataURLtoFile = (dataurl, filename) => { 
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
};

使用canvas的方法實現(xiàn)（拓展）

drawImage() 方法在畫布上繪制畫布。

在畫布上定位圖像：

context.drawImage(img,x,y);

在畫布上定位圖像，并規(guī)定圖像的寬度和高度：剪切圖像，并在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

canvas的toDataURL()方法是返回一個包含圖片展示的數(shù)據(jù)URL。可以使用type 參數(shù)其類型，默認為 png 格式

canvas.toDataURL(type, option);

option表示0到1之間的取值，選定圖片的質(zhì)量，默認值是0.92

const imgZip = (file) => {
    let imgZipStatus = new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas"); // 創(chuàng)建Canvas對象(畫布)
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content; // 指定圖片的DataURL(圖片的base64編碼數(shù)據(jù))
        var Orientation = '';
        img.onload = () => {
            // canvas.width = 400;
            // canvas.height = 300;
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0, canvas.width, canvas.height);         
            file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92為默認壓縮質(zhì)量
            
            let files = dataURLtoFile(file.content, file.file.name);
            resolve(files)
        }
    })
    return imgZipStatus;
};

導出方法imgZip

export {
    imgZip
}

2.全局引入封裝的方法

main.js

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
Vue.prototype.$imgUpload = imgUpload;

3.頁面中使用

這里使用了vant ui框架，實現(xiàn)的頭像上傳，如果用原生的input file方法也是一樣的使用方式

<van-uploader :after-read="afterCard" :before-read="beforeRead" accept="image/*" class="arrart"
                :max-size="10240 * 1024" @oversize="onOversize" ref="uploadFile">
                <!-- <div class="loadingWrap" v-show="personCardloading">
                  <van-loading class="colorCom uploadText" color="#fff" size="24px">{{uploadText}}</van-loading>
                </div> -->
                <van-image class="iconImg" round :src="Personal.iconUrl?$baseImgUrl+Personal.iconUrl:require('../../assets/img/touciang.png')" width="64" height="64" />
              </van-uploader>

限制上傳數(shù)量

通過 max-count 屬性可以限制上傳文件的數(shù)量，上傳數(shù)量達到限制后，會自動隱藏上傳區(qū)域。

禁用文件上傳

通過 disabled 屬性禁用文件上傳。

<van-uploader disabled />

限制上傳大小圖片

// 限制上傳大小圖片
    onOversize(file) {
      console.log(file, "file");
      this.$toast("文件大小不能超過 10M");
    },

上傳之前的圖片驗證

    // 上傳之前的圖片驗證
    beforeRead(file) {
      console.log(file, "file,123");
      if (this.$utils.isImage(file.name)) {
        return true;
      } else {
        this.$toast("請上傳圖片格式");
      }
    },

afterCard方法，當提交了頭像，先進行壓縮處理，再去把formData文件流作為參數(shù)調(diào)用接口，

獲取到后臺返回的圖片路徑，再調(diào)用更新頭像接口，把獲取的數(shù)據(jù)賦值顯示頭像的img.

// 頭像上傳
    afterCard(file) {
      this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
        // 請求接口上傳圖片到服務器
        uploadImg(formData).then(res => {
          console.log(res, "圖片上傳");
          if (res.code == 200) {
            console.log(res.data,"res.data")
            let params = {
              bbsIconUrl: res.data,
              userId: this.id
            };
            compileUserInfo(params)
              .then(resImg => {
                console.log(resImg, "resImg");
                if (resImg.code == 200) {
                  this.Personal.iconUrl =res.data;
                  
                  this.$toast("頭像修改成功");
                } else {
                  this.$toast(resImg.msg);
                }
              })
              .catch(error => {});
          } else {
            this.$toast(res.msg);
          }
        });
      });
    },

如果這里使用原生的input file,可按照如下操作

示例：

<input type="file" id="file" accept="image/*">

import axios from 'axios';
 
document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
 
  if (!file) {
    return;
  }
  this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
 
        //接口調(diào)用
        axios.post('/upload', formData).then((res) => {
            console.log('Upload success');
        });
  })
 
});

使用compressorjs第三方插件實現(xiàn)

compressorjs 是一個開源的圖片處理庫，提供了圖片壓縮、圖片旋轉等能力

語法：

new Compressor(file[, options])

1.compressorjs安裝

npm install compressorjs --save

2.方法封裝

ImageCompressor.js

quality:quality || 0.6, //壓縮質(zhì)量，圖片壓縮比 0-1

import Compressor from 'compressorjs';
export default function ImageCompressor(file, backType, quality) {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
			quality:quality || 0.6, //壓縮質(zhì)量
			success(result) {
                if (!backType || backType == 'blob') {
                    resolve(result)
                } else if (backType == 'file') {
                    resolve(file)
                } else {
                    resolve(file)
                }
				// resolve(result);
			},
			error(err) {
                console.log("圖片壓縮失敗");
				reject(err);
			}
		})
    })
}

此插件還能解決ios移動端拍照圖片翻轉90度問題

3.頁面使用

import ImageCompressor from '@/utils/ImageCompressor'

4.頭像上傳處理

這里記得使用 async await，注意使用的file取值，與第一種的方法有所不同

 // 頭像上傳
    async afterCard(file) {
        let newFile = await ImageCompressor(file.file, 'file', 0.6); //圖片壓縮
        const formData = new FormData();
        formData.append("file", newFile);
        uploadImg(formData).then(res => {
          if (res.code == 200) {
            this.centerInfo.iconUrl = res.data;
            let params = {
              iconUrl: res.data,
              id: this.id,
              loginType: this.loginType
            };
            updateMineIconUrl(params)
              .then(resImg => {
                console.log(resImg, "resImg");
                if (resImg.code == 200) {
               
                  this.$toast("頭像修改成功");
                } else {
                  this.$toast(res.msg);
                }
              })
              .catch(error => {});
          } else {
            this.$toast(res.msg);
          }
        });
    
    },

如果這里使用原生的input file,可按照如下操作

示例：

<input type="file" id="file" accept="image/*">

import axios from 'axios';
import Compressor from 'compressorjs';
 
document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
 
  if (!file) {
    return;
  }
 
  new Compressor(file, {
    quality: 0.6,
 
    success(result) {
      const formData = new FormData();
 
      formData.append('file', result, result.name);
        //接口調(diào)用
      axios.post('/upload', formData).then(() => {
        console.log('Upload success');
      });
    },
    error(err) {
      console.log(err.message);
    },
  });
  
});

到此這篇關于Vue.js實現(xiàn)文件上傳壓縮優(yōu)化處理的文章就介紹到這了,更多相關vue文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue實現(xiàn)excel表格的導入導出的示例
本文主要介紹了vue實現(xiàn)excel表格的導入導出的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue小圖標favicon不顯示的解決方案
本篇文章主要介紹了vue小圖標favicon不顯示的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue3獲取子組件的DOM元素的方法總結
在 Vue 3 中,訪問子組件的 DOM 元素是一個常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下
2023-08-08
關于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下
2017-05-05
Vue中$router和$route的區(qū)別詳解
在 Vue.js 中，$router 和 $route 是兩個常用的對象，用于處理路由相關的操作，下面小編就來和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧
2023-06-06
Vue中import與@import的區(qū)別及使用場景說明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場景說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Element的穿梭框數(shù)據(jù)量大時點擊全選卡頓的解決方案
本文主要介紹了Element的穿梭框數(shù)據(jù)量大時點擊全選卡頓的解決方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
這篇文章主要介紹了vue中點擊切換按鈕功能之點啟用后按鈕變?yōu)榻霉δ?，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2021-09-09