我是使用 element 中的文件上传,代码如下:
<el-upload
:headers="{'Content-Type':'multipart/form-data'}"
class="upload-btn"
action="https://jsonplaceholder.typicode.com/posts/"
accept=".xls, .xlsx"
:http-request="imageChange"
:show-file-list="false"
>
<el-button type="primary">EXCEL导入</el-button>
</el-upload>
post请求
// EXCEL导入
async imageChange(res) {
console.log(res);
let obj = {
title: "设备导入",
data: {
file: res.file,
},
};
const { data } = await postdata(JSON.stringify(obj));
console.log(data);
},
log data 时打印出来的是:
我们后端接收的就是这种形式,其他普通的接口没问题,遇到文件上传 我前端歇菜了,我一看 Network 好家伙:
只有一个 uid 其他的传不上去,咱们的 new FormData() 方法我也试过了不行!!
//以下的写法报错 说我传递的data 是一个空的连 uid 都没有了
// EXCEL导入 new FormData 方式是我使用的不对吗还是传递数据的姿势不对?
async imageChange(res) {
let file = new FormData();
file.append("file", res.file);
let obj = {
title: "设备导入",
data: {
file
},
};
const { data } = await postdata(JSON.stringify(obj));
console.log(data);
}
上传解决思路,具体代码网上很多,可以自行搜索下:
1、上传到文件服务器上,然后将url存起来。
2、用流的形式上传(如果文件特别大使用分块),后端对应解析流即可。
你不JSON.stringify 试试
可以参考下面代码示例试试:
async imageChange(res) {
let file = new FormData();
file.append("file", res.file);
file.append("title","设备导入")
const { data } = await postdata(file);
console.log(data);
}
postdata(file) {
return Request({
url: '/file/file/upload', //后端上传接口
method: 'post',
data: file,
headers: { 'Content-Type': 'multipart/form-data' },
......
})
}
楼主解决了吗??