Question

我需要将用户从CameraRoll中选择的图像上载到LoopBack组件存储中。事实是，组件存储工作正常，因为我可以通过Postman上传和下载文件。但是，当我尝试从react native到Loopback进行上传时，它始终返回http状态为“ No file content upload”（无文件内容上传）。

我读到很多人都在谈论它，并且尝试了一切，但没有一个对我有用。

首先，我从CameraRoll拍摄图像，并且图像数组如下所示：

[
  {
    exists: 1,
    file: "assets-library://asset/asset.JPG?id=3FF3C864-3A1A-4E55-9455-B56896DDBF1F&ext=JPG",
    isDirectory: 0,
    md5: "428c2e462a606131428ed4b45c695030",
    modificationTime: 1535592967.3309255,
    size: 153652,
    uri: null
  }
]

在上面的示例中，我只选择了一张图像。

我转型为Blob，然后得到：

[
  {
    _data: {
      blobId: "3FF3C864-3A1A-4E55-9455-B56896DDBF1F",
      name: "asset.JPG",
      offset: 0,
      size: 153652,
      type: "image/jpeg"
    }
  }
]

因此，在此之后，我尝试了很多事情，尝试将blob本身作为请求正文发送，试图追加到表单数据并发送表单数据，但是我尝试的方式并不重要，我总是得到“无文件内容上传”响应。

我还尝试了来自Facebook的示例，但没有成功：https://github.com/facebook/react-native/blob/master/Libraries/Network/FormData.js#L28

我现在尝试的方式：

我认为：

  finalizarCadastro = async () => {
    let formData = new FormData();
    let blobs = [];
    for(let i=0;i<this.state.fotos.length;i++){
      let response = await fetch(this.state.fotos[i]);
      let blob = await response.blob();
      blobs.push(blob);
    }
    formData.append("files", blobs);
    this.props.servico.criar(formData);
  }

以及发送到我的服务器的功能：

criar: (servico) => {
  this.setState({carregando: true});
  axios.post(`${REQUEST_URL}/arquivos/seila/upload`, servico, {headers: {'content-type': 'multipart/form-data'}}).then(() => {
    this.setState({carregando: false});
    this.props.alertWithType("success", "Sucesso", "Arquivo salvo com sucesso");
  }).catch(error => {
    this.setState({carregando: false});
    console.log(error.response);
    this.props.alertWithType("error", "Erro", error.response.data.error.message);
  })
}

Answer 1

我找到了解决方案。所以问题实际上不在于代码本身，而是在同一时间发送多个文件。为了解决所有问题，我这样做：

this.state.fotos.forEach((foto, i) => {
  formData.append(`foto${i}`, {
    uri: foto,
    type: "image/jpg",
    name: "foto.jpg"
  });
})
this.props.servico.criar(formData);

还有我将请求发送到服务器的函数：

criar: (servico) => {
  this.setState({carregando: true});
  axios.post(`${REQUEST_URL}/arquivos/seila/upload`, servico).then((response) => {
    this.setState({carregando: false});
    this.props.alertWithType("success", "Sucesso", "Arquivo salvo com sucesso");
  }).catch(error => {
    this.setState({carregando: false});
    this.props.alertWithType("error", "Erro", error.response.data.error.message);
  })
},

因此，您无需将Content-Type标头设置为multipart / form-data，也无需将图像转换为blob，实际上您只需要每个uri，我认为类型和名称属性是可选的。

将图像从React Native上传到LoopBack

1 个答案: