Melhore a experiência do usuário: Vue e compressor.js alcançam compactação de arquivos eficiente

prefácio

O upload de arquivos é um requisito comum, e o tamanho do arquivo muitas vezes se torna um dos fatores limitantes. Para melhorar a experiência do usuário e economizar o consumo de largura de banda, a compactação de arquivos durante o upload é particularmente importante. Este artigo apresentará o método de implementação de compactação de arquivo durante o upload com base na estrutura Vue e compressor.js. Ao compactar o arquivo durante o processo de upload, o tamanho do arquivo pode ser reduzido, a velocidade de upload pode ser melhorada e um processo mais rápido e mais uma experiência de upload eficiente pode ser criada para os usuários .

---

Instalar

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

---

Propriedades comuns do Compressor.js

Atributos	descrever
qualidade	Define a qualidade das imagens compactadas. Os valores variam de 0 a 1, onde 0 é a qualidade mais baixa e 1 é a qualidade mais alta.
largura	Especifica a largura alvo para imagens compactadas. Pode ser expresso em pixels ou porcentagens.
altura	Especifica a altura alvo para imagens compactadas. Pode ser expresso em pixels ou porcentagens.
largura mínima	Valor mínimo para limitar a largura da imagem compactada. Se a largura da imagem for menor que este valor, nenhuma compactação ocorrerá.
altura mínima	O valor mínimo para limitar a altura da imagem compactada. Se a altura da imagem for menor que este valor, nenhuma compactação será feita.
largura máxima	Limite a largura máxima da imagem compactada. Se a largura da imagem exceder esse valor, ela será reduzida.
altura máxima	Limita a altura máxima da imagem compactada. Se a altura da imagem exceder esse valor, ela será reduzida.
convertSize	Determina se as imagens são redimensionadas quando compactadas. Se definido como verdadeiro, a imagem será redimensionada automaticamente de acordo com a largura e altura alvo.
verificarOrientação	Verifica as informações de orientação da imagem e gira automaticamente, se necessário.

Estas são compressorjsalgumas propriedades comuns de plug-ins que controlam a qualidade de compactação, tamanho e orientação das imagens. Você pode definir essas propriedades de acordo com as necessidades reais para obter o efeito de compressão desejado. Para mais detalhes e propriedades, consulte a documentação oficial do plugin .

---

arquivo de pacote

import ImageCompressor from 'image-compressor.js';

export default function compressFile(file) {
    
    
  return new Promise((resolve, reject) => {
    
    
    const options = {
    
    
      success(result) {
    
    
        // 将压缩后的 Blob 转换为 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; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    new ImageCompressor(file, options);
  });
}

---

principal.js

// 全局挂载
import compressFile from '@/utils/compressFile';
Vue.prototype.$compressFile = compressFile;

---

usar arquivo

<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, "未压缩大小");
      // 调用压缩图片的方法 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) => {
      
      
        // 执行操作
      });
    },
  },
};
</script>

---

Processo de implementação

1. Primeiro, a biblioteca precisa ser Vueimportada para o componente ImageCompressor. Pode ser import ImageCompressor from 'image-compressor.js'alcançado através de;
2. Abaixo está uma compressFilefunção chamada . Esta função aceita um arquivo ( file) como parâmetro e retorna um Promiseobjeto para tratamento de operações assíncronas;
3. Dentro compressFileda função é criado um objeto options, que contém funções de retorno de chamada para sucesso ( success) e erro ( );error
4. Se o tamanho do arquivo exceder 5MB, defina a propriedade optionsdo objeto para indicar a qualidade da compactação como ;quality0.660%
5. A seguir, crie uma ImageCompressorinstância, optionspassando-lhe o arquivo e o objeto como parâmetros. Isso acionará o processo de compactação da imagem;
6. Quando a compactação for bem-sucedida, successa função de retorno de chamada será chamada. Na função de retorno de chamada, converta o Blobobjeto compactado em Fileum objeto e use resolveo método para retorná-lo como Promiseo valor de retorno de;
7. Quando ocorre um erro de compactação, a função de retorno de chamada é chamada error. Na função de retorno de chamada, use rejecto método para Promiseretornar as informações de erro como o valor de retorno de;
8. A seguir está Vueo código do modelo para um componente. O componente é usado no modelo van-uploaderpara realizar a função de upload de imagem;
9. Um método methodsnomeado é definido no atributo . clzpAfterReadEste método será acionado após o upload da imagem com sucesso. O parâmetro fileindica o arquivo carregado, detailindica as informações detalhadas do upload e nameindica o nome do arquivo carregado;
10. No clzpAfterReadmétodo, primeiro imprima o tamanho original do arquivo carregado file.file.size. A seguir, chame this.$compressFileo método para compactar o arquivo carregado;
11. Use awaita palavra-chave para aguardar a conclusão da operação de compactação e atribua o arquivo compactado à compressedFilevariável;
12. Imprima o tamanho do arquivo compactado compressedFile.size;
13. Crie um FormDataobjeto formDatae adicione nele o arquivo compactado formData;
14. Chame uploadFileo método, formDatapasse-o como parâmetro e use .theno método para processar a resposta após o upload ser bem-sucedido;
15. As operações subsequentes podem ser executadas no .thenmétodo, como atualizar a interface ou processar dados carregados com sucesso.

Resumindo, a ideia de implementação deste código é: van-uploaderimplementar a função de upload de imagem por meio do componente, chamar o método após o upload ser bem-sucedido clzpAfterRead, compactar o arquivo de imagem carregado por meio image-compressor.jsda biblioteca e enviar o arquivo compactado para o servidor novamente . Todo o processo utiliza Vueframework e Promiseobjetos para tratar operações assíncronas, de forma a realizar a função de compactar o tamanho da imagem durante o upload.

---

alcançar efeito