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

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

开源

个人开源的leno-admin后台管理项目,前端技术栈:reactHooksant-design;后端技术栈:koamysqlredis,整个项目包含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

代码

tsx 复制代码
  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端、移动端;

相关推荐
nodcloud42 分钟前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
万添裁8 小时前
ArkAnalyzer源码初步分析I——分析ts项目流程
typescript·arkanalyzer
项目題供诗17 小时前
微信小程序开发教程(八)
微信小程序·小程序
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
凡二人1 天前
Flip-js 优雅的处理元素结构变化的动画(解读)
前端·typescript
烛阴1 天前
【TS 设计模式完全指南】TypeScript 装饰器模式的优雅之道
javascript·设计模式·typescript
YaeZed1 天前
TypeScript7(元组)
typescript
闲云野鹤_1 天前
typeScript学习笔记总结(常用)
typescript
之恒君1 天前
TypeScript(tsconfig.json - references)
typescript
Q_Q5110082851 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app