当axios发布图像数组时，我得到了500个错误

Question

好的，所以我有一些代码，用户可以上传图像。他可以上传多张图片。问题是，当用户上传图片时，有一个请求发送到服务器，我得到一个500错误代码。

代码:

ChangeImages(images) {
this.images = images;
console.log("imagesEmit", this.images);
console.log(this.step);
console.log("images", images);
console.log("thishome", this.home);
const formData = new FormData();
let id = this.homeId;
formData.append(
"data",
JSON.stringify({ file: this.images[0], position: 1 })
);
console.log(formData);
axios
.post(`/api/upload-home-picture/${id}`, formData, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((response) => {
this.home.images[0].push(response.data);
});
},

如你所见，我在监听器中发送请求。我将在console.logs: 中显示结果this.images:"的"数据:图像/png; base64, iVBORw0KGgoAAAANSUhEUgAABsoA…wD3k6myVTczaWMZ5Ebv8P2lNvc037YOAAAAAASUVORK5CYII ="‘’‘

this.home:

funding_round_end: (...)
funding_round_start: (...)
funding_round_time: (...)
hpi_zip_avg_appreciation: (...)
id: (...)
images: (...)
info: (...)
interest: (...)
invest_now: (...)

还有有效载荷:{"images":"data:image/png;base64,后端代码:

@bp.route('/upload-home-picture', methods=['POST'])
@login_required
def upload_home_picture():
# TODO test permission
data = json.loads(request.form['data'])
home_id = data['home']
home = UserHome.query.get(home_id)
url = _upload_file()
db.session.add(UserHomeImage(url=url, home=home, pos=0))
db.session.commit()
result = dict(url=url, pos=0)
return jsonify(result)
´´´

Answer 1

最好不要发送JSON.stringify。

onUpload() {      
let formData = new FormData();
formData.append('file', this.images[0]);
axios.post(
`/api/upload-home-picture/${id}`
,formData
,{headers: {"Content-Type": "multipart/form-data"}}
)
.then((response) => {
this.home.images[0].push(response.data);
});
.catch(e => {
//...
})
}

在Python中以文件的形式获取它会更容易。