Taro上传formdata文件，兼容微信小程序

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

原由

因为微信小程序默认是不支持formdata的文件格式，所以之前项目中的图片上传功能就没办法通用，因为之前项目是将图片文件转为formdata的格式，再上传到后端；但是又不能为了微信小程序一端就去修改后端接口，但是新增个后端接口的话又嫌弃麻烦； 最后经历多方查找与实验，发现了taro里面提供了uploadFile这个函数可以完美解决这个问题；在图片提交的时候，对是哪一端用process.env.TARO_ENV来进行判断，分别执行不同的提交文件逻辑，h5端的话就使用原来web端的代码，将文件转为formdata格式，提交给到后端接口；如果为微信小程序的格式的话，则就使用taro里面的uploadFile，直接请求后端接口，不走统一封装的请求函数，需要注意的是，需要将请求头中的内容类型设置为multipart/form-data才有效，然后name就是和web端的append里面设置文件名是一样的，需要记得的是，因为是不经过统一封装的请求函数，所以需要单独配置token；

代码

  const submitFn = async () => {
    if (files.length > 0) {
      try {
        if (process.env.TARO_ENV === "h5") {
          const fd = new FormData();
          fd.append("avatar", (files[0] as any).file.originalFileObj);
          await uploadAvatarAPI(fd);
          avatarSuccess();
        }
        if (process.env.TARO_ENV === "weapp") {
          const img = (files[0] as any).url; // 此处将文件临时路径存储到img中
          Taro.uploadFile({
            url: process.env.BASE_ENV + "/user/profile/avatar",
            filePath: img, // 此处防止文件的路径
            name: "avatar", // 后端根据key拿取存储的文件
            header: {
              "Content-Type": "multipart/form-data", // 此处需要设置为"multipart/form-data"格式
              Authorization: `Bearer ${token}`,
            },
            success: function () {
              avatarSuccess();
            },
          });
        }
      } catch (error) {}

      async function avatarSuccess() {
        const res = await getUserAPI();
        setUserInfo(res.data.result);
        Taro.showToast({ title: "图片修改成功", icon: "success" });
        setTimeout(() => {
          Taro.switchTab({
            url: "/pages/main/my/index",
          });
        }, 300);
      }
    }
  };

结语

在使用taro中遇到最多的坑就是对多端情况的兼容，每端的定义都有些许不同，还有就是taro3本身存在些小bug，我个人就遇到了一次微信小程序端dev运行后，临时文件的导入路径不对，导致项目无法加载； 如果需要查看源码的，可以到上面的开源项目地址下载查看，leno-admin是完全开源的项目，并且包括web端、electron端、移动端；