Question

我尝试使用获取一次将多个图片上传到服务器。

这是我的代码芯片。

 chooseImage(){
  ImagePicker.openPicker({
    multiple: true,
    waitAnimationEnd: false
  }).then(images => {
    var photos = []
    images.map((image, i) => {
      photos.push({
        uri:image.path,
        name: image.name,
        type: 'image/jpg'
      })
      let source = {uri: image.path}
      this.state.photos.push({image: source, check: true, hairstyle: '', price: ''})
    })
    var data = new FormData();

    data.append('photos', photos)

    const config = {
      method: 'POST',
      headers: {
        'Accept':'application/json',
        'Content-Type':'multipart/form-data;',
        'Authorization': this.props.auth.token
      },
      body: data,
    }

    fetch("http://**.***.***.***/api/providers/uploadPhotos", config)
    .then(res=>res.json()).then((res) => {
      console.log("----------Response----------")
      console.log(res)
      this._getStylist()
      this.setState({photo_take: false});
    }).catch(err=>{
      console.log("------------Error-----------")
      console.log(err)
      console.log("error in uploading image")
    }).done()

  }).catch(e => {
    console.log(e);
  });
}

当我尝试它时，我从服务器获得200响应并且照片实际上没有上传到服务器。几天我搜索了解决方案，但找不到合适的解决方案。谢谢你的任何建议。

Answer 1

我是反应原生的新手，但似乎你可以循环throght图像阵列上传图片也许你可以在promise数组中添加这个帖子动作然后你可以确保每张照片都添加到你的存储。我在使用我的节点js服务器项目时使用promise数组方法非常有用。

编辑例如：

var photos=[];
var promise_array=[];
photos.forEach(function(photo){
const config = {
  method: 'POST',
  headers: {
    'Accept':'application/json',
    'Content-Type':'multipart/form-data;',
    'Authorization': this.props.auth.token
  },
  body: photo,
}

promise_array.push(fetch("http://**.***.***.***/api/providers/uploadPhotos", config)
.then(res=>res.json()).then((res) => {
  console.log("----------Response----------")
  console.log(res)
  this._getStylist()
  this.setState({photo_take: false});
}).catch(err=>{
  console.log("------------Error-----------")
  console.log(err)
  console.log("error in uploading image")
}).done())

})

Promise.all(promise_array);

因为fetch是一个我可以放在promise数组中的promise。也许在示例中存在语法错误，我不确定完全反应原生支持承诺方法，但这里是使用https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all的承诺方法的文档

React Native如何一次将多张照片上传到服务器

1 个答案: