Vant Uploader función de carga de imágenes

documentación de referencia del cargador de furgonetas

1. Limitar el número de cargas El
   número de archivos cargados se puede limitar a través del atributo max-count Después de que el número de cargas alcance el límite, el área de carga se ocultará automáticamente.
2. Limitar el tamaño de carga
   El tamaño del archivo cargado se puede limitar a través del atributo de tamaño máximo. Los archivos que excedan el tamaño se filtrarán automáticamente y la información del archivo se puede obtener a través del evento de gran tamaño.
3. Verifique y procese el archivo antes de cargarlo A través de la función de lectura previa, puede realizar la verificación y el procesamiento antes de cargarlo, y admitir la devolución de Promise para personalizar el objeto del archivo. Por ejemplo, comprimir imágenes: use compressorjs para comprimir imágenes, optimizar funciones y comprimir imágenes en todos los formatos.
4. Después de cargar el archivo, se obtendrán los datos. Después de cargar el archivo, se activará la función de devolución de llamada posterior a la lectura para obtener el objeto de archivo correspondiente.
5. Para obtener más detalles, consulte la documentación oficial de 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>