element组件代码
<el-upload
ref="businessLicense"
action
:auto-upload="false"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-change="uploadSectionFile"
:limit="1"
>
<el-button class="upload-botton" size="small" type="primary"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip">
支持扩展名:.jpg .png .gif
</div>
</el-upload>
methods:{
uploadSectionFile(file) {
console.log(file, "file");
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
const isLt3M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("只能是图片!");
this.$refs.upload.clearFiles();
this.files = null;
return;
}
if (!isLt3M) {
this.$message.error("上传图片大小不能超过 2MB!");
this.$refs.upload.clearFiles();
this.files = null;
return;
}
// FormData 对象
let formData = new FormData();
// 文件对象
formData.append("raw", file.raw);
formData.append("name", file.name);
console.log(formData, "文件对象");
formData.forEach((value, key) => {
console.log("key %s: value %s", key, value);
});
console.log(formData,file.raw)
uploadImg(formData)
.then((res) => {
console.log("上传成功", res, "入参",formData);
})
.catch((error) => {
console.log(error, "上传失败");
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
}
这里注意 如果想console看 formData的值 可以
formData.forEach((value, key) => {
console.log("key %s: value %s", key, value);
});
另外 再netWorke中看到formData 为空 看看在 axios的请求拦截是不是对数据做了 转化处理
我当时是因为做了config.data = JSON.stringify(config.data);导致的formData为空