NativeScript Vue 发送带有表单数据的请求（multipart/form-data）

Posted 2023-04-14

【中文标题】NativeScript Vue 发送带有表单数据的请求（multipart/form-data）

【英文标题】：NativeScript Vue send request with form data (multipart/form-data)

【发布时间】：2021-04-30 11:31:35

【问题描述】：

我的应用程序中有一个案例，我需要将数据作为表单数据发送到服务器。数据包括一条消息和一个可选的文件列表。我面临的问题是发送请求时它没有正确形成。

请求负载

预期（浏览器中具有相同请求的示例）

实际（在 NativeScript 中运行时产生的请求）

实际结果是负载以某种方式被 URL 编码。

代码示例

sendData( id, message, files ) 
  const config = 
    headers: 
      'Content-Type': 'multipart/form-data'
    
  ;

  const payload = new FormData();
  payload.append('message', message);

  if (files && files.length > 0) 
    files.forEach((file) => 
      payload.append(`files`, file, file.name);
    );
  

  return AXios_INSTANCE.post(
    `/api/save/$id`,
    payload,
    config
  );

从上面可以看出，我正在使用axios，并且我正在尝试使用FormData 来格式化数据。根据我的研究，NativeScript 似乎过去不支持通过 XHR 的二进制数据 - 但是查看 this merge request on GitHub 看起来它似乎在一年前就已修复。

所以我怀疑我做错了什么，也许有替代使用 FormData 的替代方法，或者我不应该使用 axios 来处理这个特定请求？

版本号

nativescript

6.8.0

tns-android

6.5.3

tns-ios

6.5.3

【参考方案1】：

Nativescript 的background-http 支持多部分表单数据。

请参阅下文，了解其如何配置为进行分段上传

var bghttp = require("nativescript-background-http");
var session = bghttp.session("image-upload");
var request = 
  url: url,
  method: "POST",
  headers: 
    "Content-Type": "application/octet-stream"
  ,
  description: "Uploading "
;

var params = [
   name: "test", value: "value" ,
   name: "fileToUpload", filename: file, mimeType: "image/jpeg" 
];
var task = session.multipartUpload(params, request);

【讨论】：

非常感谢 - 效果很好。老实说，我确实看到其他一些帖子提到了这个包，但我想看看我是否可以不用它.. 但无论如何它工作得很好:)