陈桥驿站 陈桥驿站

ReactNative Fetch formdata 文件上传

--> React Native 阅读 ( 50 ) 文章转载请注明来源!

前言

几年前搞过React Native文件上传,后来不用又忘了,今天用的时候出了很多错,查了查API,把容易踩得坑记录下来。

使用

file封装

注意,定义一个file对象。

  • uri 文件的绝对路径。
  • type 多段式提交,就这么写,别问为什么,踩坑踩过来的。
  • name 最好是写上,一般后台会自己定义文件名。
let file = {
  uri: this.state.images[index],
  type: 'multipart/form-data',
  name: this.state.uuid + '_' + index + '.jpg'
}

fetch提交

我这里是多个文件上传,报纸可能有很多很多份,那么我体现文件的上传进度直接就是已经上传的文件数量。

这里我采用递归的形式

  • 递归入口 index = 0
  • 递归出口 index = this.state.images.length
  • 递归过程 上传成功一个文件 this.upload(index + 1)

也就是说,当我上传的进度是文件数组的大小的时候,结束递归。

  uploadImage(index) {
    if(index == this.state.images.length) {
      this.setState({
        isShowSpinner: false
      })
      this.props.navigation.state.params.onResult('上传成功');
      this.props.navigation.goBack();
      return ;
    }
    else {
      this.setState({
        isShowSpinner: true,
        uploadMessage: '正在上传第' + parseInt(index + 1) + '张图片-_-||'
      })
      let file = {
        uri: this.state.images[index],
        type: 'multipart/form-data',
        name: this.state.uuid + '_' + index + '.jpg'
      }
      let datas = new FormData();
      datas.append('name', this.state.uuid + '_' + index + '.jpg');
      datas.append('file', file);
      fetch('http://localhost:8080/AppInterface/upload.action', {
        method:'POST',
        headers:{
            'Content-Type':'multipart/form-data',
        },
        body: datas
      }).then((response) => response.json())
      .then((json) => {
        if(json.status == 1) {
          this.uploadImage(index + 1);
        }
      })
    }
  }

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://www.cctv3.net/archives/rnUpload.html (转载时请注明本文出处及文章链接)

React Native
发表新评论
雷姆
拉姆