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

原创已于 2022-08-27 14:22:26 修改 · 1.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端 #typescript

于 2022-08-26 21:44:41 首次发布

web端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个基于Vue的移动端图片上传组件实现细节。通过二次封装van-uploader组件，支持多选、限制上传数量及大小等功能，并对上传前后进行有效验证。

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

在这里插入图片描述
template

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

<script>
export default {
  props: {
    // 文件列表
    fileList: {
      type: Array,
      default: () => {
        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 >= 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>