[英]Send Blob file via Axios
I have object like this:我有这样的对象:
{
"name": "filename",
"size": 3523507,
"type": "image/png",
"extension": "png",
"url": "blob:http://localhost:8081/082e9c22-9869-4289-a9c8-e36b0640e61c"
}
And i need upload it to backend.我需要将其上传到后端。 I try it:
我试试看:
const session = axios.create({
baseURL: debug ? 'http://localhost:8000': '',
xsrfCookieName: CSRF_COOKIE_NAME,
xsrfHeaderName: CSRF_HEADER_NAME,
});
let formData = new FormData();
formData.append('file', file, 'file.name');
return session.post(`/chats/files/`,{...formData},), {
headers: {
"Content-Type": `multipart/form-data`,
}
}
But it doesn't work to add Blob to the formData但是将Blob添加到formData不起作用
UPD I get an object with files from the send-message method in the vue-advanced-chat component in this form: UPD 我以这种形式从 vue-advanced-chat 组件中的 send-message 方法获取了一个包含文件的对象:
{
"name": "filename",
"size": 3523507,
"type": "image/png",
"extension": "png",
"localUrl": "blob:http://localhost:8081/aae047a9-5f9e-481f-b0cc-17febe954c31",
"blob": {}
}
Then I format it to display in the interface before uploading to the server然后我在上传到服务器之前格式化它以显示在界面中
UPD2 UPD2
I converted blob to file我将 blob 转换为文件
send_file(roomId, messageId, blob_file, isAudio, duration) {
let formData = new FormData();
let file = new File([blob_file.blob], blob_file.name);
formData.append('file[]', file, blob_file.name);
return session.post(`/chats/files/`,
{'chat': roomId, 'message': messageId, ...formData},), {
headers: {
'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
},
timeout: 30000,
}
},
and still get: {"file":["No files were sent."]}仍然得到: {"file":["No files were sent."]}
You are not sending data in correct way.您没有以正确的方式发送数据。 It should be:
它应该是:
export const uploadFileRequest = ({ file }) => {
const data = new FormData();
data.append('file', file, file.name);
return session.post(`/chats/files/`, data, {
headers: {
'Content-Type': `multipart/form-data;boundary=${data._boundary}`,
},
timeout: 30000,
});
};
it should work, for reference https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04它应该可以工作,供参考https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04
After several days of searching, debugging and dozens of attempts, I managed to find a solution.经过几天的搜索,调试和数十次尝试,我设法找到了解决方案。
let file = new File([blob_file.blob], fileName);
let file = new File([blob_file.blob], fileName);
let fileName = `${blob_file.name}.${blob_file.extension}`;
let fileName = `${blob_file.name}.${blob_file.extension}`;
formData.append('file', file, fileName);
formData.append('chat', roomId);
formData.append('message', messageId);
multipart/form-data
, and don't specify _boundary - because in new versions of formData it is determined automatically!multipart/form-data
,并且不要指定 _boundary - 因为在新版本的 formData 中它是自动确定的!headers: {
'Content-Type': `multipart/form-data`,
},
so the final version of the code looks like this:所以代码的最终版本如下所示:
send_file(roomId, messageId, blob_file) {
let formData = new FormData();
let fileName = `${blob_file.name}.${blob_file.extension}`;
let file = new File([blob_file.blob], fileName);
formData.append('file', file, fileName);
formData.append('chat', roomId);
formData.append('message', messageId);
return session.post(`/chats/files/`,
formData, {
headers: {
'Content-Type': `multipart/form-data`,
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.