Vant Uploader 上传图片功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vant Uploader 上传图片功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

van-uploader参考文档

限制上传数量
通过 max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
限制上传大小
通过 max-size 属性可以限制上传文件的大小，超过大小的文件会被自动过滤，文件信息通过 oversize 事件获取。
文件上传前进行校验和处理通过before-read 传入函数，可以在上传前进行校验和处理，支持返回 Promise 对 file 对象进行自定义处理。例如压缩图片：使用compressorjs压缩图片，优化功能，压缩所有格式的图片。
文件上传完毕后获取数据文件上传后会触发 after-read 回调函数，获取到对应的 file 对象。
更多细节请参考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>