使用antd框架upload组件完成单张图片上传业务

官网地址：1x.antdv.com/components/…;

组件使用：

<a-upload
     :file-list="[]" 
     :multiple="false"
     :maxCount="1"
     :before-upload="beforeUpload" 
     action="#">
     <a-button>  上传 </a-button>
 </a-upload>

相关属性：

multiple：是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
action：上传的地址，
maxCount：最大数量,
beforeUpload：上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。

上传方法：

      //上传文件
        async beforeUpload(file) {
            if((file.size/1048576)>4){
            return  message.error("上传文件不得大于4M！")
            }
             try{
                let fd = new FormData();
                fd.append("file", file);
                //调接口传fd文件对象
                const res = await  UploadApi.upload(fd);
                this.formModel.proFile = res.data.filePath[0];
                message.success("上传文件成功！")
            }catch(err){
                console.log(err);
            }finally{
            //阻止upload组件自带的自动上传文件
                return false;           
            } 
        },

上传流程：

通过antd框架的upload上传组件，拿到上传文件的file对象。提前做个判断，如果上传图片的大小超过规定大小，弹出错误提示，禁止用户继续上传。如果图片大小符合规定，定义一个formData对象用于存储file文件对象。

存储完file文件对象后，调用接口传入formData(或者先用插件对图片进行压缩，再传给调用的接口),最后记得返回false或者Promise 对象 reject用于阻止upload组件自带的自动上传文件。

如果没有返回false或者Promise 对象 reject,控制台会直接报404错误。