React Native - Axios -正在尝试上传图像

mrphzbgm  于 2022-12-04  发布在  iOS
关注(0)|答案(6)|浏览(187)

我是React Native的新手,尝试使用Axios上传图像,但得到:Request failed with status code 500
我没有后端问题,因为我可以上传图像与 Postman 和一切都很好。
下面是我的代码,如果你知道的话请帮我解决,当我控制台记录数据时,所有的数据都是正常的!!

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);
        });
soat7uwm

soat7uwm1#

不能确定,但在我的情况下,我不得不添加一个'名称'字段到文件。遵循其他建议,我已经结束了这样的东西:

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);
}
svujldwt

svujldwt2#

我找到了解决方案。首先我需要从我的URI中删除file://,所以我添加了代码:

const fileURL = this.state.pickedImaged.uri;
const cleanURL = fileURL.replace("file://", "");

而不是什么导致的问题是图像类型,请检查什么图像类型,你试图上传,你可以上传取决于后端你正在使用.
希望能帮助有同样问题的人

kx1ctssn

kx1ctssn3#

我有同样的问题,这是什么帮助我。
1.在android/app/src/main/java/com/{您的项目}/MainApplication.java中注解以下行:

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

1.在android/app/src/debug/java/com/{您的项目}/ReactNativeFlipper.java第43行中的注解:

builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

1.图像上传代码:

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);
     });
mbyulnm0

mbyulnm04#

翻转器版本=0.33.1至翻转器版本=0.41.0
需要更新您的Flipper_Version高于或等于0.41.0,更新后工作正常。

sauutmhj

sauutmhj5#

在Android上有两件事很重要;设置'Content-Type': 'multipart/form-data'
另外,确保你的Blob上的类型是有效的MimeType。在我的例子中,我传递了type: 'image',在iOS中,它工作得很好,但在android上,它不工作,直到我相应地将它更新为type: 'image/jpeg'

bkhjykvo

bkhjykvo6#

在react中,我使用以下代码:

//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)进行测试
我希望能帮助到你:)

相关问题