使用场景

Ant Design Vue 1.7.8
vue 2.x

问题：在使用Ant Design Vue 过程中发现了他没有限制数量上传的功能，因此自己使用js实现，仅仅一句代码，使用的时候通过change事件进行splice进行截取

     <a-upload
     //开启多选
                multiple
                //限制图片类型
                accept="image/png, image/jpeg"
                //图片上传地址
                :action="uploadImgURL"
                //上传后显示的样式
                list-type="picture-card"
                //绑定的数据
                :file-list="photo"
                //预览事件
                @preview="handleImgPreview"
                //上传事件 上传中 成功 失败均会触发
                @change="handleImgChange"
                //拖拽上传失败进行触发 作用于拖拽非png和jpg图片进行触发
                @reject="rejectImgUpload"
              >
              //上传的按钮样式
                <div v-if="photo.length < 5" class="feed_upload">
                  <img src="../../assets/feeback/feedback_upload.png" alt />
                </div>
              </a-upload>
              //预览图片
              <a-modal
                :visible="previewVisible"
                :footer="null"
                title="查看图片"
                @cancel="handleImgCancel"
              >
                <img alt="example" style="width: 100%; height:100%;" :src="previewImage" />
              </a-modal>
              

js

//图片转为BaseURL
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  data() {
    return {
      // 预览图片显隐
      previewVisible: false,
      // 预览图片地址
      previewImage: null,
      // 图片的上传地址
      uploadImgURL: null,
      // 图片列表
      photo: [],
    }
  },
  methods: {
     //拖拽上传非图片类型的回调
    rejectImgUpload() {
      this.$message.warning('请上传png,jpg图片')
    },
//关闭图片预览
    handleImgCancel() {
      this.previewVisible = false
    },
 // 打开图片预览
    async handleImgPreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
   //图片列表改变,限制最大上传图片为5个
    handleImgChange({ fileList }) {
      this.photo = fileList.slice(-5)
    },
  },
}