Blob未附加到formData

时间:2020-10-14 08:40:13

标签: node.js append multipartform-data multer image-resizing

我正在编写一个函数,该函数接受一组文件,调整文件的大小并将其上传到云存储中。

我有一个小问题,文件被附加到我的表单数据中,事实证明它们没有...

在后端,我使用nodejsMulter来处理图像,并且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);
        }
    }

0 个答案:

没有答案