Question

我正在使用个人资料图片文件上传系统，我的HTML：

<form enctype="multipart/form-data" id="imageUpload" >
                        <img  id="profileImage" src="./images/avatar.png">
                        <button  type="button">
                        <input type="file" name="image" id="inpFile" class="hidden" onchange="uploadPicture(this)">
                        <label for="inpFile">Download</label></button>

我的脚本：

 async function uploadPicture(input) {
    
//show user the image
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#profileImage').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
        }

        const form = document.querySelector('#imageUpload')//tried to send form.image.value before
        const formData = new FormData();
        formData.append("inpFile", input.files[0]);
        try {
            const res = await fetch('/my-profile-image-upload', {
                method: 'POST',
                body: JSON.stringify(Object.fromEntries(formData)),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
        } catch (error) 
            console.log(error);
    }

所以我要在一个对象内部但在控制器中发送该文件

module.exports.upload_picture = (req, res) => {
    const { FormData } = req.body;
    console.log(FormData);
}

我变得不确定。我的目标是将此图像存储在我的公用文件夹中，因为它对所有用户可见，并将文件名存储在数据库中，但是我无法使用fetch发送此文件。而且我有

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

在我的app.js文件中

关于如何使用抓取功能发送图片的任何想法？

Answer 1

它是未定义的，因为您没有用于处理multipart / form-data和上载文件的中间件。您可以使用multer访问req.file对象。

使用Fetch在发布请求中未定义FormData图像

1 个答案: