我正在编写一个函数,该函数接受一组文件,调整文件的大小并将其上传到云存储中。
我有一个小问题,文件被附加到我的表单数据中,事实证明它们没有...
在后端,我使用nodejs
和Multer
来处理图像,并且multer.array('files')的结果始终为[]。
我尝试更改代码以在不调整大小的情况下上传图像,并且效果很好。 有什么建议吗?
这是我的功能:
async function addProject(){
try {
btn = "disabled";
let replacedTags = [];
allTags = allTags.split(',');
let final_height = 640;
let formdata = new FormData();
for(let i = 0; i < allTags.length; i++) {
let newTag = allTags[i].replace(' ', '');
if(newTag != "") replacedTags.push(newTag);
}
tags = replacedTags;
//Resize images
let raw_images = document.getElementById('project_images').files;
for(let j = 0; j < raw_images.length; j++) {
let reader = new FileReader();
reader.readAsDataURL(raw_images[j]);
reader.name = "reader_" +new Date().getTime();
reader.size = raw_images[j].size;
reader.onload = function(event){
let img = new Image();
img.src = event.target.result;
img.size = event.target.size;
img.onload = async function(el){
let canvas = document.createElement('canvas');
let scale = final_height / el.target.height;
canvas.width = el.target.width * scale;
canvas.height = final_height;
let ctx = canvas.getContext('2d');
ctx.drawImage(el.target, 0, 0, canvas.width, canvas.height);
//Here is the problem, the blob does not get appended to the form
canvas.toBlob((blob) => {
formdata.append('files', blob, `project_${new Date().getTime()}.jpg`);
}, 'image/jpeg', 0.92);
}
};
}
formdata.append('header', header);
formdata.append('title', title);
formdata.append('info', info);
formdata.append('tags', tags);
formdata.append('ages', ages);
for (let value of formdata.values()) {
console.log(value);
}
let head = new Headers();
head.append('Accept', 'application/json');
let createProject = await fetch(`${ipaddress}/leader/project`, {
method: 'POST',
credentials: 'include',
body: formdata,
// headers: head
});
let newProject = await createProject;
}
catch(err) {
console.log(err);
}
}