Função de upload de imagem do Vant Uploader

documentação de referência do van-uploader

1. Limite o número de uploads O
   número de arquivos enviados pode ser limitado através do atributo max-count. Após o número de uploads atingir o limite, a área de upload será ocultada automaticamente.
2. Limitar tamanho do upload
   O tamanho do arquivo carregado pode ser limitado através do atributo max-size.Arquivos acima do tamanho serão filtrados automaticamente, e as informações do arquivo podem ser obtidas através do evento oversize.
3. Verifique e processe o arquivo antes do upload Por meio da função de leitura anterior, você pode executar a verificação e o processamento antes do upload e oferecer suporte ao retorno da Promessa para personalizar o objeto de arquivo. Por exemplo, compactar imagens: use compressorjs para compactar imagens, otimizar funções e compactar imagens em todos os formatos.
4. Após o upload do arquivo, os dados serão obtidos. Após o upload do arquivo, a função callback de leitura posterior será acionada para obter o objeto de arquivo correspondente.
5. Para mais detalhes, consulte a documentação oficial vant

<template>
  <div>
    <van-uploader
      v-model="fileList"
      :max-count="1"
      :max-size="2048 * 1024"
      :after-read="OnAfterRead"
      :before-read="onBeforeRead"
      @oversize="onOversize"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import Compressor from "compressorjs";
export default {
    
    
  data() {
    
    
    return {
    
    
      fileList: [],
      IMG_LIST: "", //图片路径

     
    };
  },
  methods: {
    
    
    OnAfterRead(result) {
    
    
      let newImage = new Image();
      // 这里将src传入需要获取信息的图片地址或base64
      newImage.src = result.content;

      newImage.onload = () => {
    
    
        // 输出图片信息 比如可以获取图片宽高
        console.log("图片宽", newImage.width);
        console.log("图片高", newImage.height);
        this.fileList[0].url = result.content;
        // 点击上传图片的结果（base64的图片字符串）IMG_LIST
        this.IMG_LIST = this.fileList[0].url;
        // 控制台打印
        console.log(" this.IMG_LIST ", this.IMG_LIST);
      };
    },
    //上传图片压缩,需要安装依赖： npm i compressorjs,并引入（import） 图片0.6倍压缩
    onBeforeRead(file) {
    
    
      return new Promise((resolve) => {
    
    
        new Compressor(file, {
    
    
          quality: 0.6,
          success: resolve,
          error(err) {
    
    
            console.log('图片压缩失败---->>>>>',err.message);
          },
        });
      });
    },
    //图片大小超过2M提示
    onOversize(file) {
    
    
      this.$toast("图片大小不能超过 2M");
    },
    //点击移除图片
    onDelete() {
    
    
      this.fileList = [];
    },
  },
};
</script>

<style>
</style>