使用 react-native 和 PHP(CodeIgniter) 作为后端的图像上传问题

Question

我有一个以 React Native 和 CodeIgniter 作为后端的应用场景。

我有一个代码片段可以上传由 react-native-image-picker 选择的图像，如下所示：

  let formData = new FormData();
  let imageBody = {
                uri: newImage,
                name: 'profilepicture.jpg',
                type: 'image/jpeg',
            };
formData.append('file', (imageBody)) // case 1 gives network error
formData.append('file', JSON.stringify(imageBody)) //case 2 goes OK

 apiUpdateUser(formData)
            .then(res => {

                this.setState({ showSnack: true, snackText: 'Profile Picture Updated'})
            })
            .catch(err => {
                this.setState({ showSnack: true, snackText: 'Update Failed' })
            });

apiUpdateUser 方法如下：

export const apiUpdateUser = body => {
return new Promise((resolve, reject) => {
    axios
        .post(ApiRoutes.updateUser, body, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(Constant.network.networkError);
        });
});
};

照常处理此上传的后台 Php 代码是：

$file=$this->request->getFile('file');//in CI
$file=$_FILES['file'];//in normal php

我的问题是，使用这两种方法，我都没有在 $file 变量中得到任何东西，在这两种情况下，文件变量都是空的。

我已经检查了 react native 中的实现，与在线的 tutorials/demonstrations 相比，它似乎根本没有错误。后端的处理方式也很明显，还可以。

我可以使用 POSTMAN 轻松实现此上传，但是使用 react-native 我遇到了这个错误。任何人都可以在这里给我一些启示吗？？

Answer 1

我正在使用 VUE 并使用 Axios 发送文件。所以我认为这可能会对您有所帮助。

我正在使用下面的表单数据方式来设置文件或图片。

formData.append('file', this.form.image_url, this.form.image_url.name);

这里this.form.image_url直接指的是$event.target.files[0];，其中$event针对的是输入

在后台，和你这里一样。

这对我来说效果很好。我不确定您作为 imageBody 传递的是什么，因此很难对此发表评论。

Answer 2

你可以试试这个

 let imageBody = {
                uri: newImage,
                name: 'profilepicture.jpg',
                type: 'image/jpeg',
            };
apiUpdateUser(imageBody)
            .then(res => {

                this.setState({ showSnack: true, snackText: 'Profile Picture Updated'})
            })
            .catch(err => {
                this.setState({ showSnack: true, snackText: 'Update Failed' })
            });

export const apiUpdateUser = body => {
return new Promise((resolve, reject) => {
    axios
        .post(ApiRoutes.updateUser, body, {
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(Constant.network.networkError);
        });
});
};

Answer 3

原来 JSON.stringify() 是罪魁祸首。

如果没有该行，应用程序会发出网络错误。这就是为什么我随机添加它只是为了看看这是否是错误的原因。

由于添加了网络错误问题后，我没有再考虑它，只认为这是文件上传问题。实际上，我现在看到这是我一直在使用的 react native flipper 版本的一个已知问题，我设法解决了它。

使用 react-native 和 PHP(CodeIgniter) 作为后端的图像上传问题

Image upload issue with react-native and PHP(CodeIgniter) as backend

php

react-native

file-upload

codeigniter-4

react-native-image-picker