Question

如何在 react-native Android 中发送带有文件的 POST 请求

2020-05-04

3739

javascript react-native file fetch-api

我尝试使用带有提取请求的 rect-native 62.2 代码发送文件当我选择文件时，我的填充数组是这个 ->

{"data": ~blob image data~,"fileName": "Screenshot_20200504_082033.jpg", "fileSize": 347275, "height": 1544, "isVertical": true, "originalRotation": 0, "path": "/storage/emulated/0/DCIM/Screenshots/Screenshot_20200504_082033.jpg", "timestamp": "2020-05-04T02:50:33Z", "type": "image/jpeg", "uri": "content://media/external/images/media/126441", "width": 720}

我使用的库用于选择数据是 react-native-image-picker 。

我发送的提取请求将如下所示：

var picForm = new FormData();
          picForm.append('userId', userId);
          picForm.append('file', source) // <- this is the main data
fetch(API_HOST + 'user/profilePictureUpload', {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'multipart/form-data',
              Authorization: 'Basic jfjsfhsjkfhsjkjksksjjksfjkskfksdd',
              Authorizationkeyfortoken:''fjsfsfjsfsjhfsjkfhjksfjksfjsf,
            },
            body: picForm,
          }).then(res => res.text()).then(text => console.log(text)).catch(e => console.log(e));

对于此代码，我收到错误 source 是：

[TypeError: Network request failed]

当我尝试此操作时

var picForm = new FormData();
              picForm.append('userId', userId);
              picForm.append('file', {
  uri: source.uri, //<- content://media/external/images/media/126441
  type: 'image/jpeg',
  name: source.fileName //<- Screenshot_20200504_082033.jpg
})

对于此代码，我收到错误 source 是：

[TypeError: Network request failed]

var picForm = new FormData();
          picForm.append('userId', userId);
          picForm.append('file', source.files[0]) // <- this is the main data

出现的错误未定义对象：

var picForm = new FormData();
              picForm.append('userId', userId);
              picForm.append('file', 'files') // <- this is the main data

网络正确，但这不是我想要发送的。这是简单的字符串，您知道如何使用获取请求发送文件吗？

Answer 1

请按如下方式创建图像对象

var imageData = {
 uri: iamge_path,
  type: file_type, //the mime type of the file
  name: file_name
}

const data = new FormData(); 
data.append("image",imageData)

请确保请求类型为 post，并且您的后端正确处理表单数据

Answer 2

此代码对我来说工作正常，可用于上传多张图片，包括照片说明和 user_id 以及进度状态

constructor() {
    super();
    this.state = {
      uploadPercentage: 0,
    }
  }

  // upload Files upload_Files = async () => {
  upload_File() {

    if (this.validate_Fields()) {
      const { image, images, files, description, userId, size } = this.state;
      console.log('AddPost Screen : upload_File:', 'userId:', userId, 'Files:', files, 'description:', description)
      // this.setState({ error: '', loading: true });

      if (this.state.type === 'image/jpeg') {

        console.log('AddPost Screen : upload_ files :', files);
        const formData = new FormData();
        formData.append('user_id', userId);
        formData.append('description', description);
        // formData.append('files[]', files);
        for (let i = 0; i < files.length; i++) {
          formData.append('files[]', {
            name: files[i].path.split('/').pop(),
            type: files[i].mime,
            uri: Platform.OS === 'android' ? files[i].path : files[i].path.replace('file://', ''),
          });
        }


        // upload percentage progress bar  ******************************************************
        const options = {
          onUploadProgress: (progressEvent) => {
            const { loaded, total } = progressEvent;
            let percent = Math.floor((loaded * 100) / total)
            console.log(`${loaded}kb of ${total}kb | ${percent}%`);

            if (percent < 100) {
              this.setState({ uploadPercentage: percent })
            }
          }
        }


        axios.post(API_URL + '/fileuploadapi/uploadPost', formData, options, {
          headers: { "Content-type": "multipart/form-data" }
        }).then((response) => {
          console.log(JSON.parse(JSON.stringify(response.status)));


          // upload percentage progress 
          this.setState({ uploadPercentage: 100 }, () => {
            setTimeout(() => {
              this.setState({ uploadPercentage: 0 })
            }, 1000);
          })


          this.cleanupImages();

          Alert.alert('Upload Post Successfully');
        }).catch((error) => {
          console.log(error);
          this.cleanupImages();

          Alert.alert('image Upload Post Failed  , Try again !');
        });

     }
   }
}



  // clear files data 
  cleanupImages() {

    this.setState({
      description: '',
      image: null,
      images: null,
      // video: '',
      files: '',
      uploadPercentage: 0,
    })
    ImagePicker.clean().then(() => {
      console.log('removed tmp images from tmp directory');
    }).catch(error => {
      alert(error);
    });
  }

如果有任何需要请告诉我