vue二次封装van-uploader上传图片组件(移动端)

本文介绍: 【代码】vue二次封装 van-up loader 上传图片组件(移动端)

vue二次封装 van-uploader 上传 图片 组件(移动端)

&lt;template&gt;
  &lt;van-uploader
    v-model="uploadData"
    //是否可以多选
    :multiple="multiple"
    :after-read="afterRead"
    //最大上传数量
    :max-count="maxCount"
    // 最大上传大小
    :max-size="1024 * 1024 * 10"
    :before-read="beforeRead"
    @oversize="onOversize"
  /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: {
    // 文件列表
    fileList: {
      type: Array,
      default: () =&gt; {
        return [];
      }
    },
    // 上传数量
    maxCount: {
      type: Number,
      default: 9
    },
    // 是否开启多图选择
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      uploadData: this.fileList
    };
  },
  methods: {
    // 上传后的回调，获取到对应的file对象
    afterRead (file) {
      this.$emit('uploadResult', file);
    },
    // 上传前
    beforeRead (file) {
      // 多图上传时file为一个数组
      // 多图上传的流程
      if (Array.isArray(file)) {
        for (let i = file.length - 1; i &gt;= 0; i--) {
          const imageType = /^image/(jpeg|png|jpg)$/.test(file[i].type);
          if (!imageType) {
            file.splice(i, 1);
            this.$tipMessage('warning', '上传图片格式只能是 JPEG|PBG|JPG 格式!');
          }
        }
        return true;
      } else {
        // 单图上传流程
        const imageType = /^image/(jpeg|png|jpg)$/.test(file.type);
        if (!imageType) {
          this.$tipMessage('warning', '上传图片格式只能是 JPEG|PBG|JPG 格式!');
          return false;
        }
        return true;
      }
    },
    // 监听上传图片的大小
    onOversize (file) {
      this.$tipMessage('warning', '上传图片不能超过10M');
    }
  }
};
</script>