原因:
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//阻止默认上传
},