反应原生相机图像上传答案

【问题标题】：React native camera image upload反应原生相机图像上传
【发布时间】：2020-12-10 07:36:45
【问题描述】：

我在 React Native 中上传图片时遇到了一些问题 :) 请帮忙！！！

这是我的例子：

  async function uploadFirstPicture(uri) {
    const photo = {
      name: 'first-selfie',
      type: 'image/jpeg/jpg',
  uri: Platform.OS === 'android' ? uri : uri.replace('file://', ''),
};

const formData = new FormData();

formData.append('file', photo);

const response = await axios({
  method: 'POST',
  url: `${API_ROOT}/Session/Upload`,
  data: {
    SessionId: sessionId,
    File: formData,
    DataType: 3,
  },
  headers: {'Content-Type': 'multipart/form-data;'},
});

    (await response.data.success) && updateState({uploadFirstPicture: true});
  }

请求标头：

accept application/json, text/plain, */* content-type
multipart/form-data;

请求正文：

{
   "SessionId":"0198a8c6-e250-485d-82c3-8ce9190a4d20",
   "File":{
      "_parts":[
         [
            "file",
            {
               "name":"first-selfie",
               "type":"image/jpeg/jpg",
               "uri":"/var/mobile/Containers/Data/Application/BBAFA325-BE23-45C5-B81F-255BBC4856B8/Library/Caches/Camera/D6D7839A-E1B1-425E-8488-BC8FDA0DE092.jpg"
            }
         ]
      ]
   },
   "DataType":3
}

请求错误 400

Failed to read the request form. Missing content-type boundary.

请求网址：

https://bio.dev.cdigital.am/api/Session/Upload

招摇：

https://bio.dev.cdigital.am/swagger/index.html

【问题讨论】：

这能回答你的问题吗？ React Native Failed Upload Image
不给同样的错误
你可以尝试删除multipart/form-data之后的;吗？
是但同样的错误

标签： react-native file-upload axios camera upload

【解决方案1】：

对于选择图像，您可以使用以下。

   ImagePicker.launchImageLibrary(options, response => {
        console.log("My repoinse data --- > ", response)
        if (response.didCancel) {

        } else if (response.error) {
        } else if (response.customButton) {
        } else {
          let searchString = response.fileName
            ? response.fileName.toString().toLowerCase()
            : '';
          if (!searchString) {
            return;
          }
            this.setState(
              {
                profileImage: response.uri,
                cropperVisible: true,
                AmazingCropper: true,
                imageType: response.type,
                imageFileName: response.fileName,
                imgLat: response.latitude,
                imgLong: response.longitude
              },
              () => {
                this.uploadOriginalImage(Platform.OS);
              },
            );
          
        }
      });

上传图片到服务器：-

 uploadOriginalImage = type => {
    this.setState({ loading: true, responseMessage: "" });
    let passData = new FormData();
    passData.append('original_image', {
      uri:
        type === 'android'
          ? this.state.profileImage
          : this.state.profileImage.replace('file://', ''),
      type: this.state.imageType,
      name: this.state.imageFileName,
    });
   
    Dating.uploadimage(passData, true)
      .then(res => {
        this.setState({ loading: false,  });
       

        if (res.Status === 200) {
          
        } else if (res.Status === 401) {
         
        } else {
          
        }
      })
      .catch(err => {

        this.setState({ loading: false });
      });
  };

【讨论】：