React Native 向 Nodejs multer 发送空的 req.body 和未定义的 req.file

Question

我正在使用react-native 和nodejs(multer)。在nodejs中，我收到

req.body-{}

、

req.file-undefined

和

req.files-undefined

我检查了 stackoverflow 中的所有内容，但没有任何效果。这是我的代码。

客户端代码（反应本机）：

const onPressOpenLibrary = async () => {
        const result = await launchImageLibrary({
            maxHeight: 200,
            maxWidth: 200,
            selectionLimit: 0,
            mediaType: 'photo',
            includeBase64: true
        })

        if (result.assets) {
            const formData = new FormData()

            formData.append('name', 'Alexander')
         
            formData.append('avatar', {
                uri: result.assets[0].uri,
                type: result.assets[0].type,
                name: result.assets[0].fileName
            })

            setResult(result)

            axios.post('upload-image', formData, {
                headers: {
                    'Content-Type': `multipart/form-data;`
                }
            })
        }
    }

服务器代码（nodejs）：

app.use(express.urlencoded({ extended: false }))
app.use(express.json())
...
const upload = multer({
    dest: 'uploads/'
})

router.post(
    '/upload-image',
    upload.single('avatar'),
    async (req: Request, res: AppResponse, next: NextFunction) => {
        console.log('upload image body', req.body) // -> {}
        console.log('upload image files', req.files) // -> undefined
        console.log('upload image file', req.file) // -> undefined
    }
)

我尝试过的：

• 在本机反应中，当我选择并安全状态时，我得到的响应

  <Image source={{ uri: result.assets[0].uri }} style={{ width: 200, height: 200 }} />

  并且图像正确显示。
• 邮递员一切正常
• 从 axios 并在客户端获取不工作

问题可能是什么以及最终的解决方案？

Answer 1

result.assets[0].uri

返回设备内存上本地缓存图像的引用，但您不能直接将该图像原始数据上传到远程服务器。

您应该将图像上传为

base64

或

BLOB

数据。

Answer 2

问题： 无法使用 axios 或 fetch 从

FormData

发送文本或图像

react native

。

解决方案： 将 axios 降级为

axios: ^0.24.0

。

Answer 3

用这个 用于获取图像

 const selectFile = async () => {
    try {
        const res = await DocumentPicker.pick({
            type: [DocumentPicker.types.allFiles],
        });
        console.log('res : ' + JSON.stringify(res));
        setSingleFile(res);
    } catch (err) {
        setSingleFile(null);
        if (DocumentPicker.isCancel(err)) {
            alert('Canceled');
        } else {
            alert('Unknown Error: ' + JSON.stringify(err));
            throw err;
        }
    }
};

我正在创建一个上传图像的功能

const uploadFile = async () => {

        console.log(singleFile[0].uri,"singlefile");
       const formdata = new FormData()
       formdata.append('file',{
        uri: singleFile[0].uri,
        type:singleFile[0].type,
        name: singleFile[0].name
       })
     
    if (singleFile) {
          console.log(formdata,"?>?>?");
        try {
            const res = await axios({
                method: "post",
                baseURL: `http://192.168.0.101:4000/api/v1/avatar/addadvertise1`,
                withCredentials: true,
                headers: { 'Content-Type': 'multipart/form-data' },
                data: formdata,
            });
            console.log('File uploaded', res.data);
        } catch (err) {
            console.error('Failed to upload file', err);
        }
    }
   
};