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

Question

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

请求负载

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

实际（在 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

Answer 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);

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

NativeScript Vue send request with form data (multipart/form-data)

multipartform-data

binary-data

nativescript

nativescript-vue