使用 axios 上传文件时的问题答案

【问题标题】：Issue in uploading files with react native with axios使用 axios 上传文件时的问题
【发布时间】：2020-06-15 05:26:07
【问题描述】：

我正在尝试使用 axios 作为 http 处理程序将文件上传到 react-native 应用程序中的服务器。我的代码如下：

let promises = [];
     const body = new FormData();
      console.log(body);
      body.append('device_name', this.state.deviceInfo.DeviceName);
      body.append('device_id', this.state.deviceInfo.DeviceID);
      body.append('device_ip', this.state.deviceInfo.DeviceIP);
      body.append('device_os', this.state.deviceInfo.DeviceOS);
      body.append('upload_type', 'user');
      body.append('user_name', user.Email);
      body.append('file1', {
        uri: this.state.newImageUrl.uri,
        name: 'test.jpg',
        type: 'image/jpg',
      });

      promises.push(
        apiUploadDocs(body)
          .then(res => {
            profileImageName = res[0].NewFileName;
          })
          .catch(err => {
            console.log('this error', err);
          }),
      );

我的 apiUploadDocs 是：

 export const apiUploadDocs = body => {
  return new Promise((resolve, reject) => {
    axios
      .post(ApiRoutes.uploadDocs, body,{headers:{'content-Type': `multipart/form-data`}})
      .then(res => {
        console.log('upload success');
        console.log(res);
      })
      .catch(err => {
        console.log('upload error', err);
        if (err.response) {

        }
        reject(Constant.network.networkError);
      });
  });
};

每个分配的变量在记录时都有正确的值，当我尝试从 Postman 上传时，api 运行良好。但是这里的这个 sn-p 在记录时会导致一个错误，即undefined。正如stackoverflow中的一些答案所建议的那样，我已经尝试从uri中修剪'file://'。我想不通。你能帮我找出这里有什么问题吗？

PS：登录时的正文是：

{
  "_parts":[
      [
         "device_name",
         "sdk_gphone_x86"
      ],
      [
         "device_id",
         "xxxxxxxxxxxxx"
      ],
      [
         "device_ip",
         "10.0.2.xx"
      ],
      [
         "device_os",
         "goldfish_x86"
      ],
      [
         "upload_type",
         "user"
      ],
      [
         "user_name",
         "xxxxx@gmail.com"
      ],
      [
         "file1",
         [
            "Object"
         ]
      ]
   ]
}

如果它有任何参考意义。

【问题讨论】：

标签： react-native file-upload request axios react-native-android

【解决方案1】：

我找到了一个在 react-native 中上传图片的链接。 https://aboutreact.com/file-uploading-in-react-native/ 这可能对您有所帮助。

let uploadImage = async () => {
    //Check if any file is selected or not
    if (singleFile != null) {
      //If file selected then create FormData
      const fileToUpload = singleFile;
      const data = new FormData();
      data.append('name', 'Image Upload');
      data.append('file_attachment', fileToUpload);
      let res = await fetch(
        'http://localhost//webservice/user/uploadImage',
        {
          method: 'post',
          body: data,
          headers: {
            'Content-Type': 'multipart/form-data; ',
          },
        }
      );
      let responseJson = await res.json();
      if (responseJson.status == 1) {
        alert('Upload Successful');
      }
    } else {
      //if no file selected the show alert
      alert('Please Select File first');
    }
};

【讨论】：