React Native - Axios - 尝试上传图片

Posted 2023-03-28

【中文标题】React Native - Axios - 尝试上传图片

【英文标题】：React Native - Axios - Trying to upload image

【发布时间】：2019-03-26 23:30:47

【问题描述】：

我是 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);
        );

【问题讨论】：

你把uri文件放在哪里了？

【参考方案1】：

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

//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) 进行测试

希望对你有所帮助:)

【讨论】：

感谢您的回复，但这也是我正在做的，它只是不适用于 react native！

我看到一些他们删除文件的帖子：///

【参考方案2】：

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

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

导致问题的原因是图像类型，请根据您使用的后端检查您尝试上传的图像类型以及可以上传的内容。

希望能帮助遇到同样问题的人

【讨论】：

你能把它编辑成你的完整代码吗？我不知道把uri放在哪里。提前谢谢！

尝试“Content-Type”：“application/x-www-form-urlencoded”，接受：“application/json”

【参考方案3】：

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

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

【讨论】：

感谢 MIME 类型是我所缺少的。

【参考方案4】：

FLIPPER_VERSION=0.33.1 到 FLIPPER_VERSION=0.41.0

需要更新您的 Flipper_Version 或等于 = 0.41.0 更新后一切正常。

【参考方案5】：

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

在 android/app/src/main/java/com/yourProject/MainApplication.java 评论以下行：

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

在 android/app/src/debug/java/com/yourProject/ReactNativeFlipper.java 第 43 行评论：

builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

图片上传代码：

var formData = new FormData();
   formData.append('UserId', '[e-mail]');
   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);
     );

【讨论】：

我有同样的问题..我可以从邮递员上传，但不能从 ios 和 android 的真实设备上传..我试过这个，但不适合我