前言

上傳文件是一個常見的需求，并且文件大小往往成為限制因素之一。為了提升用戶體驗和節(jié)省帶寬消耗，上傳時的文件壓縮便顯得格外重要。本文將介紹基于 Vue 框架和 compressor.js 的上傳時文件壓縮實現(xiàn)方法，通過在上傳過程中對文件進行壓縮，減小文件大小，提升上傳速度，為用戶創(chuàng)造更快捷、高效的上傳體驗。

安裝

npm install image-compressor.js
yarn add image-compressor.js

compressor.js 常用的屬性

這些是 compressorjs 插件的一些常見屬性，用于控制圖像的壓縮質(zhì)量、尺寸和方向。你可以根據(jù)實際需求設(shè)置這些屬性以獲得想要的壓縮效果。更多詳細信息和屬性，請參閱插件的官方文檔。

封裝文件

import ImageCompressor from 'image-compressor.js';
export default function compressFile(file) {
  return new Promise((resolve, reject) => {
    const options = {
      success(result) {
        // 將壓縮后的 Blob 轉(zhuǎn)換為 File 對象（如果組件支持Blob則不用這一步）
        const compressedFile = new File([result], file.name, {
          type: file.type,
          lastModified: Date.now(),
        });
        resolve(compressedFile);
      },
      error(e) {
        reject(e);
      },
    };
    if (file.size > 5 * 1024 * 1024) {
      options.quality = 0.6; // 壓縮質(zhì)量
      options.convertSize = false;//不進行圖像尺寸的調(diào)整
      options.checkOrientation = false; // 圖片翻轉(zhuǎn)，默認為false
    }
    new ImageCompressor(file, options);
  });
}

main.js

// 全局掛載
import compressFile from '@/utils/compressFile';
Vue.prototype.$compressFile = compressFile;

使用文件

<template>
  <div>
    <van-field label="照片">
      <template #input>
        <van-uploader :after-read="(file, detail) => clzpAfterRead(file, detail, 'xszzp')" v-model="cszp" :max-count="1" accept="image/*" />
      </template>
    </van-field>
  </div>
</template>
<script>
import { uploadFile } from "@/api/publicApi";
export default {
  data() {
    return {
      cszp: "",
    };
  },
  mounted() {},
  methods: {
    async clzpAfterRead(file, detail, name) {
      console.log(file.file.size, "未壓縮大小");
      // 調(diào)用壓縮圖片的方法 this.$compressFile
      const compressedFile = await this.$compressFile(file.file);
      console.log(compressedFile.size, "壓縮后大小");
      let formData = new FormData();
      formData.append("file", compressedFile);
      uploadFile(formData).then((res) => {
        // 執(zhí)行操作
      });
    },
  },
};
</script>

實現(xiàn)過程

• 首先，需要在 Vue 組件中引入 ImageCompressor 庫。可以通過 import ImageCompressor from 'image-compressor.js' 來實現(xiàn)；
• 下面是一個名為 compressFile 的函數(shù)。該函數(shù)接受一個文件(file)作為參數(shù)，并返回一個 Promise 對象，用于處理異步操作；
• 在 compressFile 函數(shù)內(nèi)部，創(chuàng)建了一個 options 對象，其中包含了成功(success)和錯誤(error)的回調(diào)函數(shù)；
• 如果文件的大小超過 5MB，則設(shè)置 options 對象的 quality 屬性為 0.6，表示壓縮質(zhì)量為 60%；
• 接下來，創(chuàng)建一個 ImageCompressor 實例，將文件和 options 對象作為參數(shù)傳遞給它。這將觸發(fā)圖片壓縮的過程；
• 當壓縮成功時，會調(diào)用 success 回調(diào)函數(shù)。在回調(diào)函數(shù)中，將壓縮后的 Blob 對象轉(zhuǎn)換為 File 對象，并使用 resolve 方法將其作為 Promise 的返回值返回；
• 當壓縮出錯時，會調(diào)用 error 回調(diào)函數(shù)。在回調(diào)函數(shù)中，使用 reject 方法將錯誤信息作為 Promise 的返回值返回；
• 接下來是一個 Vue 組件的模板代碼。在模板中使用了 van-uploader 組件來實現(xiàn)圖片的上傳功能；
• 在 methods 屬性中定義了一個名為 clzpAfterRead 的方法。該方法會在圖片上傳成功后觸發(fā)。參數(shù) file 表示上傳的文件，detail 表示上傳的詳細信息，name 表示上傳文件的名稱；
• 在 clzpAfterRead 方法中，首先打印出上傳文件的原始大小 file.file.size。接下來，調(diào)用 this.$compressFile 方法對上傳的文件進行壓縮；
• 使用 await 關(guān)鍵字等待壓縮操作完成，并將壓縮后的文件賦值給 compressedFile 變量；
• 打印出壓縮后文件的大小 compressedFile.size；
• 創(chuàng)建一個 FormData 對象 formData，并將壓縮后的文件添加到 formData 中；
• 調(diào)用 uploadFile 方法，將 formData 作為參數(shù)傳遞給它，并使用 .then 方法處理上傳成功后的響應(yīng)；
• 在 .then 方法中可以執(zhí)行后續(xù)操作，例如更新界面或處理上傳成功的數(shù)據(jù)。

總結(jié)起來，這段代碼的實現(xiàn)思路是：通過 van-uploader 組件實現(xiàn)圖片上傳功能，在上傳成功后調(diào)用 clzpAfterRead 方法，將上傳的圖片文件通過 image-compressor.js 庫進行壓縮，并將壓縮后的文件再次上傳到服務(wù)器。整個過程使用了 Vue 框架以及 Promise 對象來處理異步操作，以實現(xiàn)圖片上傳時壓縮大小的功能。

實現(xiàn)效果

到此這篇關(guān)于Vue與compressor.js實現(xiàn)高效文件壓縮的文章就介紹到這了,更多相關(guān)Vue compressor.js文件壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論