如何创建 POST 请求以从本地路径将文件存储在服务器上 - React Native

Posted 2023-02-27

【中文标题】如何创建 POST 请求以从本地路径将文件存储在服务器上 - React Native

【英文标题】：How to create a POST request to store file on server from local path - React Native

【发布时间】：2021-09-23 07:23:09

【问题描述】：

我正在尝试使用 React Native 中的 REST 服务将 pdf 文件从本地设备保存到我的服务器。就我而言，当我单击“保存”按钮时，文件存储在我想同时保存在我的服务器上的临时文件路径中。

 <View style=styles.button>
                            <Button
                                onPress=() => 
                                    // Save Document
                                    this._viewer.saveDocument().then((filePath) => 
                                        console.info('saveDocument:', filePath);
                                      );
                                
                                title="Save"
                            />
                        </View>

filePath 是一个临时路径 - 'saveDocument:', '/data/user/0/nativetemplate/cache/Test.pdf' 我想将此文件上传到服务器。我是 React Native 的新手，我对实现感到困惑。 我知道我应该使用 fetch()，但我应该调用一个单独的方法来做到这一点吗？如何在按钮 onPress 操作的同时触发此操作？

fetch('https://example.com/data', 
  method: 'POST',
  headers: 
    Accept: 'application/json',
    'Content-Type': 'application/json'
  ,
  body: JSON.stringify(
    filePath: '/data/user/0/nativetemplate/cache/Test.pdf',
  )
);

我实际上想发送文件内容以更新服务器上的文件，我可以直接发送临时（缓存）文件路径还是需要先从缓存中检索文件？如果是这样，我如何从这个路径中检索文件？

【问题讨论】：

您应该必须使用 multipart/form-data 使用 api 调用将文件发送到服务器。

【参考方案1】：

您需要使用 FormData 将文件上传到服务器

const file = 
    uri : filePath,
    type : fileType,
    name : filename
  
  var formData = new FormData()
  formData.append('filePath', file) // filePath -> your param for the file

然后进行服务器调用

const response = await fetch(serverurl, 
    method: "POST",
    body:formData
  )