antDesignofVue框架a-upload组件以base64位上传图片

1.编写视图代码

几个a-upload组件属性讲一下
:beforeUpload 属性是上传前对文件限制
:customRequest 属性是对上传的文件处理(很重要)
之后的img标签用于展示
span标签是为了绑定删除事件
2.编写javascript中代码
beforeUpload

beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp'
        if (!isJPG) {
          this.$message.error('请上传图片文件');
        }
        const isLt2M = file.size / 1024 < 1024*16 && file.size / 1024 > 10;
        if (!isLt2M) {
          this.$message.error('文件大小应在10KB~200KB之间');
        }
        return isJPG && isLt2M
      },

selfUpload

selfUpload({ action, file, onSuccess, onError, onProgress }) {
        const base64 = new Promise(resolve => {
          const fileReader = new FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onload = () => {
            resolve(fileReader.result);
            this.model.cover = fileReader.result;
          };
        });
      },

deleteImg

deleteImg(e) {
        this.model.cover = '';
        e.stopPropagation();
      },

灵感来源
https://blog.csdn.net/SKY_Lake/article/details/101039707