HarmonyOS鸿蒙Next中axios上传多个文件并携带参数，后台获取不到数据

HarmonyOS鸿蒙Next中axios上传多个文件并携带参数，后台获取不到数据

processImage(path: string) {
    
    let file2 = fs.openSync(path, 0o2);
    let stat = fs.lstatSync(path);
    let buf2 = new ArrayBuffer(stat.size);
    fs.readSync(file2.fd, buf2);
    fs.fsyncSync(file2.fd);
    fs.closeSync(file2.fd);


    let formData = new FormData();
    formData.append('files', buf2, 'file1.png'); // 第一个文件
    formData.append('files', buf2, 'file2.png'); // 第二个文件
    formData.append('type', 1); // 其他参数

    // 发送请求
    axios.post<string, AxiosResponse<string>, FormData>(
      'http://127.0.0.1:86/xxxxxx/xxxxxxxx',
      formData,
      {
        headers: { 'Content-Type': 'multipart/form-data' },
        context: getContext(this),
        onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
          console.info(
            progressEvent.loaded && progressEvent.total
              ? `${Math.ceil((progressEvent.loaded / progressEvent.total) * 100)}%`
              : '0%'
          );
        },
      }
    ).then((res: AxiosResponse<string>) => {
      console.info("result: " + JSON.stringify(res.data));
    }).catch((err: AxiosError) => {
      console.error("error: " + JSON.stringify(err));
    });
  }

@PostMapping("/processPixelsBatch")
	public R processPixelsBatch(@RequestParam("type") Integer type,@RequestPart("files") MultipartFile[] files) {
    
  }

cke_100782.png

后台接口，通过postman 测试没有问题，可以获取文件数据，arkTs 多文件上传并携带参数要如何写？


更多关于HarmonyOS鸿蒙Next中axios上传多个文件并携带参数，后台获取不到数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中使用axios上传多文件及参数时，需确保使用FormData对象封装数据。示例代码：

const formData = new FormData();
formData.append('param1', 'value1');
files.forEach(file => formData.append('files', file));

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

后台需通过multipart/form-data方式解析，检查接收参数的键名是否与前端一致。鸿蒙网络模块支持标准FormData操作，无需额外适配。

更多关于HarmonyOS鸿蒙Next中axios上传多个文件并携带参数，后台获取不到数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


问题出在FormData的构建方式上。在HarmonyOS Next中，使用ArrayBuffer直接作为文件内容传递给FormData.append()方法会导致后台无法正确解析。

需要将ArrayBuffer转换为Blob对象：

let blob = new Blob([buf2], { type: 'image/png' });
formData.append('files', blob, 'file1.png');
formData.append('files', blob, 'file2.png');

同时，不需要手动设置Content-Type头，浏览器会自动设置正确的multipart/form-data边界：

// 移除这行
// headers: { 'Content-Type': 'multipart/form-data' }

这样修改后，后台Spring Boot的@RequestPart就能正确接收到文件数组了。

回到顶部