formData uniapp 封装

在uniapp框架中，`FormData` 是一种用于处理键值对数据的对象，通常用于上传文件或发送HTTP请求时携带复杂的数据结构。如果你想要封装 `FormData` 的操作以便于在项目中复用和管理，可以创建一个自定义的工具类或者模块，步骤如下：

1. 创建一个名为 `FormDataUtils.js` 或类似的文件。

// FormDataUtils.js
import { FormData } from 'uni-app';

class FormDataWrapper {
  constructor() {
    this.formData = new FormData();
  }

  // 添加键值对
  append(key, value) {
    this.formData.append(key, value);
  }

  // 添加文件
  addFile(key, file) {
    this.formData.append(key, file);
  }

  // 清空所有数据
  clear() {
    this.formData.removeAll();
  }

  // 转换为URLSearchParams字符串
  toUrlParamsString() {
    return new URLSearchParams(this.formData).toString();
  }

  // 发送到服务器（示例，实际应用中可能需要替换为axios或fetch）
  sendToServer(url, options = {}) {
    const config = {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data', // 如果包含文件，设置正确的content-type
      },
      data: this.formData,
    };

    uni.request({
      url,
      ...options,
      data: config.data,
      ...config.headers,
    });
  }
}

export default FormDataWrapper;

然后在需要使用的地方导入并实例化这个类：

import FormDataWrapper from '@/utils/FormDataUtils';

const formData = new FormDataWrapper();
formData.append('name', 'John');
formData.addFile('image', localFile); // 本地文件

// 使用sendToServer方法发送数据
formData.sendToServer('/api/upload', { timeout: 5000 });

// 或者转换为URLSearchParams格式
const paramsStr = formData.toUrlParamsString();