iview的upload手动上传图片?

2,369 阅读2分钟
原因:
1.后续要求新增了几个输入框判断该用form表单上传文件?
答:刚开始是采用了原先的axios上传数据,但是有个问题会出现参数错误

message:"NOT found"

后续我又修改采用新建了formData()对象,然后使用for in 循环append到对象中,想打印出来打印出来不是一个空对象才奇怪。

属性又不是直接挂载在你这个FormData实例上。

你可以通过它提供的迭代器,或者get方法去取值。
然后继续发送请求发现每次用那个方法传值,但是这个_img始终在network打印不出来,并报错,发现是需要加

let config ={

headets:{'Content-Type':'mutipart/form-data'}

}//请求头

但是在封装好的axios方法中无法使用,于是就重新写了个方法

 axios.post('/api/order/remitOrder', formData, config).then(res => {
     if(res.data.code == '0'){
          this.$Message.success("图片上传成功!");
          this.OrderListMoadl.stateModal = false;
         this.uploadList = '';
         this.uplodaVisible = true;
          this.initDataApi();
}else{
      this.$Message.error(res.msg)
}
console.log(res)
})
至此图片成功上传,但是因为是手动上传在before-upload中renturn false 所以
钩子验证没用需要自己验证
 handleBeforeUpload(file) {
    this.uploadList='';
    const FileExt = file.name.replace(/.+\./, "");//取得文件的后缀名
    const Reg = /(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/;
    if (file.size > 2097152) {//限制文件的大小
       this.$Message.error(file.name + '大小超过2M!')
          file = null //超过大小将文件清空
    } else if (!Reg.test(FileExt)) { //判断文件是否是图片格式
        this.$Message.error('图片上传格式不正确!');
        file=null
     }else{
         this.OrderListMoadl.formSubmit._img = file; //需要传给后台的file文件
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
        const _base64 = reader.result;
        this.uploadList = _base64; //将_base64赋值给图片的src,实现图片预览
     };
     this.uplodaVisible = false;
     }

     return false//阻止默认上传

},