Vant Uploader 上传图片功能

van-uploader参考文档

1. 限制上传数量 通过 max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
2. 限制上传大小 通过 max-size 属性可以限制上传文件的大小，超过大小的文件会被自动过滤，文件信息通过 oversize 事件获取。
3. 文件上传前进行校验和处理 通过before-read 传入函数，可以在上传前进行校验和处理，支持返回 Promise 对 file 对象进行自定义处理。例如压缩图片：使用compressorjs压缩图片，优化功能，压缩所有格式的图片。
4. 文件上传完毕后获取数据 文件上传后会触发 after-read 回调函数，获取到对应的 file 对象。
5. 更多细节请参考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";exportdefault{data(){return{fileList:[],IMG_LIST:"",//图片路径};},methods:{OnAfterRead(result){let newImage =newImage();// 这里将src传入需要获取信息的图片地址或base64
      newImage.src = result.content;

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