Taro上传formdata文件,兼容微信小程序
开源
个人开源的leno-admin
后台管理项目,前端技术栈:reactHooks
、ant-design
;后端技术栈:koa
、mysql
、redis
,整个项目包含web端
、electron客户端
、mob移动端
、template基础模板
,能够满足你快速开发一整套后台管理项目;如果你觉得不错,就为作者点个✨star
✨吧,你的支持就是对我最大的鼓励;
原由
因为微信小程序默认是不支持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
端、移动端;