javascript - 无法在“FormData”上执行“附加”:参数 2 不是“Blob”类型
问题描述
我有一个允许用户上传多张图片的上传器。为了只创建或更新他想要添加/更改的图像,我更新了一个如下所示的对象:
{main: Blob, "1": Blob, "2":Blob}
所以如果以后只需要更新“1”,发送的对象将只包含
{"1": Blob}
单击保存时,它会触发一个应该将图像附加到 formData() 的函数。遗憾的是 formData 永远不会更新。我有以下错误:
无法对“FormData”执行“附加”:参数 2 不是“Blob”类型。
export async function uploadImages(files, userId) {
try {
const images = new FormData();
files.main && images.append("image", files.main, "main");
files[1] && images.append("image", files[1], "1");
files[2] && images.append("image", files[2], "2");
const res = await ax.post(process.env.SERVER_URL + "/upload-images", {
images,
userId,
});
return "success"
} catch (err) {
return "error"
}
}
如何解决这个问题?谢谢!
解决方案
您应该无法在控制台中看到 FormData 对象的内容,因为它不可序列化。您可以改为检查请求负载,检查浏览器开发工具中的“网络”选项卡,找到您的请求并查看“标题”选项卡的底部以查看“表单数据”日志。你会看到这样的东西:
此外,您应该在 axios 中将标题“Content-Type”设置为“multipart/form-data”。这是工作示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<input type="file" multiple id="filepicker" />
<button id="send">Send</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
const myformData = new FormData();
document
.querySelector('#filepicker')
.addEventListener('change', function (event) {
const { files } = event.target;
Object.values(files).forEach(function (file, index) {
myformData.append(index, file);
});
});
document.querySelector('#send').addEventListener('click', function () {
axios({
method: 'post',
url: 'http://google.com',
data: myformData,
headers: { 'Content-Type': 'multipart/form-data' },
})
.then((response) => console.log(response))
.catch((err) => console.log(err));
});
</script>
</body>
</html>
推荐阅读
- wso2 - wso2 身份服务器 502 网关错误
- node.js - 创建一个 API 来包装一个... API?
- angular - 在 Angular 5 中保存和读取图像的最佳实践是什么?
- python-3.x - Pyplot:在图形和颜色条之间添加间距
- python - 你如何真正退出 python 脚本?
- javascript - 如果页面已经轻微滚动,为什么这不起作用?
- python - 如何在Django中获取表数据代替表object_new Object
- entity-framework - 实体框架中的关系数据库急切加载问题
- ios - 如何使用 IBInspectable 数据进行自定义 segue
- python - 基于另一个(不规则)时间序列的下采样时间序列,熊猫