HarmonyOS鸿蒙Next中Axios怎么提交表单数据

HarmonyOS鸿蒙Next中Axios怎么提交表单数据

后端接收form表单格式的数据，根据文档尝试了很多种写法都不行，代码如下

axios.post(url, formData, {
   headers: { 'Content-Type': 'multipart/form-data' },
   transformRequest: [(data: ESObject, headers: AxiosRequestHeaders) => {
      // 对发送的 data 进行任意转换处理
      return data;
   }]
});

ohos/axios这边使用post并且Content-Type=multipart/form-data会自动变成上传，后来说重写transformRequest直接返回参数，加上了也不行；formData数据尝试了object，map以及FormData这几个类型，都不成功。

另外，axios里有个postForm方法，直接使用也不行，官方文档好像也没有这个方法的解释。

只是提交简单的键值对数据，不是上传文件。


更多关于HarmonyOS鸿蒙Next中Axios怎么提交表单数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

https.post<string, AxiosResponse<string>, FormData>(url, data, { headers: { ‘Content-Type’: ‘multipart/form-data’ }, transformRequest: [(data: ESObject, headers: AxiosRequestHeaders) => { return data; }] });


改成这样就好了，post后面加上参数类型

更多关于HarmonyOS鸿蒙Next中Axios怎么提交表单数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙的 ohos/axios 是基于 http 模块封装的。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/js-apis-http-V14#multiformdata11

在文档里面搜索一下 formData，有以下实例代码，不知道这个文档能不能帮到你。

multiFormDataList: [ // 可选，仅当Header中，'content-Type’为’multipart/form-data’时生效，自API 11开始支持该属性。 { name: “Part1”, // 数据名，自API 11开始支持该属性。 contentType: ‘text/plain’, // 数据类型，自API 11开始支持该属性。 data: ‘Example data’, // 可选，数据内容，自API 11开始支持该属性。 remoteFileName: ‘example.txt’ // 可选，自API 11开始支持该属性。 }, { name: “Part2”, // 数据名，自API 11开始支持该属性。 contentType: ‘text/plain’, // 数据类型，自API 11开始支持该属性。 // data/app/el2/100/base/com.example.myapplication/haps/entry/files/fileName.txt filePath: ${getContext(this).filesDir}/fileName.txt, // 可选，传入文件路径，自API 11开始支持该属性。 remoteFileName: ‘fileName.txt’ // 可选，自API 11开始支持该属性。 } ] }

在HarmonyOS鸿蒙Next中，使用Axios提交表单数据可以通过以下步骤实现：

  1. 安装Axios：首先确保你的项目中已经安装了Axios。可以通过npm或yarn进行安装：

    npm install axios
或
yarn add axios

  2. 导入Axios：在需要使用Axios的文件中导入它：

    import axios from 'axios';

  3. 配置Axios请求：使用Axios的post方法提交表单数据。表单数据通常以FormData对象的形式传递：

    const formData = new FormData();
formData.append('username', 'user123');
formData.append('password', 'pass123');

axios.post('https://example.com/api/login', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});

  4. 处理响应：在then回调中处理服务器返回的响应数据，在catch回调中处理可能的错误。

通过以上步骤，你可以在HarmonyOS鸿蒙Next中使用Axios提交表单数据。

在HarmonyOS鸿蒙Next中使用Axios提交表单数据，可以通过application/x-www-form-urlencoded格式进行提交。首先，确保安装并导入Axios库。然后，使用axios.post方法，将表单数据作为data参数传递。如果需要设置请求头为application/x-www-form-urlencoded，可以使用URLSearchParams对象来处理表单数据。示例代码如下：

const axios = require('axios');
const params = new URLSearchParams();
params.append('username', 'testuser');
params.append('password', 'testpass');

axios.post('https://example.com/api/login', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

这段代码演示了如何提交表单数据并处理响应。

回到顶部