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";
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>