React Native - Axios - 尝试上传图片

Question

我是 React Native 的新手，并尝试使用 Axios 上传图像，但得到： Request failed with status code 500

我没有后端问题，因为我可以用邮递员上传图片，一切都很好。

这是我的代码，如果您知道解决方案，请帮助我，当我控制台日志数据时，所有数据都很好！！

const data = new FormData();
        data.append('name', name);
        data.append('childrenImage', childrenImage);
        data.append('parent', parent)

        console.log(data);

        axios.post('http://192.168.0.24:3000/childrens/', data, {
                headers: {
                    'Authorization': auth,
                    'accept': 'application/json',
                    'Content-Type': `multipart/form-data`
                }
            }
        ).then(res => {
            console.log(res.data);
            console.log(res.status);
        })
        .catch(err => {
            console.log(err.message);
        });

Answer 1

不能确定，但​​就我而言，我必须在文件中添加一个“名称”字段。按照其他建议，我最终得到了这样的结果：

import axios from 'axios';
import FormData from 'form-data';

function upload (data, images, token) {
  const formData = new FormData();
  formData.append('data', data);
  images.forEach((image, i) => {
    formData.append('images', {
      ...image,
      uri: Platform.OS === 'android' ? image.uri : image.uri.replace('file://', ''),
      name: `image-${i}`,
      type: 'image/jpeg', // it may be necessary in Android. 
    });
  });
  const client = axios.create({
    baseURL: 'http://localhost:3001',
  });
  const headers = {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'multipart/form-data'
  }
  client.post('/items/save', formData, headers);
}

Answer 2

我遇到了同样的问题，这对我有帮助。

1. 在 android/app/src/main/java/com/{yourProject}/MainApplication.java 中注释以下行：

   initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
   

2. 在 android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java 第 43 行注释中：

   builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
   

3. 图片上传代码：

   var formData = new FormData();
      formData.append('UserId', 'abc@abc.com');
      formData.append('VisitId', '28596');
      formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20');
      formData.append('EvidenceCategory', 'Before');
      formData.append('EvidenceImage', {
        uri: Platform.OS === 'android' ? `file:///${path}` : path,
        type: 'image/jpeg',
        name: 'image.jpg',
      });
      axios({
        url: UrlString.BaseUrl + UrlString.imageUpload,
        method: 'POST',
        data: formData,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data'
        },
      })
        .then(function (response) {
          console.log('*****handle success******');
          console.log(response.data);
   
        })
        .catch(function (response) {
          console.log('*****handle failure******');
          console.log(response);
        });
   

Answer 3

在反应中我使用以下代码：

//Set file in state
fileChangedHandler = (event) => {
    this.setState({ selectedFile: event.target.files[0] })
  }

//Set form data and request in axios
uploadHandler = () => {
    const formData = new FormData();
    console.log(this.state.selectedFile)
    formData.append('file', this.state.selectedFile, this.state.selectedFile.name);

    axios.post('http://localhost:3000/api/uploadFile', formData)
      .then((response) => {
        console.log(response)
        }
      .catch((err) => {
        console.log(err)
      })

在后端接收文件并使用 console.log(req.files) 进行测试

我希望对你有帮助:)