multer，react-native 图片上传不起作用

Question

我正在尝试使用图像选择器上传图片。我制作了一个图像组件并让一个图像选择器填充该组件，但是将图像数据上传到服务器不起作用。

这是由附加到按钮的 onPress 调用的代码：

const handlePhoto = async () =>{
        if(image!== null){
            console.log(image)
            const fileToUpload = image;
            const data = new FormData();
            data.append('name', 'Image Upload');
            data.append('file', fileToUpload);
            let res = await fetch(
                'http://localhost:3000/user/pic_upload',
                {
                method: 'post',
                body: data,
                headers: {
                    'Content-Type': 'multipart/form-data; ',
                },
            }
            );  
            let responseJson = await res.json();
            console.log(responseJson,'result')
            if (responseJson.status == 1) {
                alert('Upload Successful');
            }
        } else {
            alert('Please Select File first');
        }
    }

在用户路由器的索引文件中：

const upload=multer({
    storage:multer.diskStorage({
        destination:function(req,file,callback){
            callback(null,'uploads/')
        },
        filename:function(req,file,callback){
            callback(null,new Date().valueOf()+path.extname(file.originalname))
        }
    }),
});

router.post('/pic_upload', upload.single('file'), controller.picUpload)

而 picUpload 路由器只有 console.log

我应该修复什么才能让它工作？

Answer 1

根据评论讨论，您的 handlePhoto 是错误的，对于 multer 工作，您需要 File 类型的对象。

文件类型：https://developer.mozilla.org/en-US/docs/Web/API/File

文件类型图片：https://i.stack.imgur.com/B0Z96.png