uniApp上传文件踩坑日记

       最近在做移动端app，开始接触uniapp。想着直接用PC端的前后端API去做文件上传，但是uniapp的底层把请求拆成了普通请求和文件上传请求，所以不能用一个axios去做所有请求的处理，拆成uni.request和uni.uploadFile去分别处理两种情况。

H5

       所以要封装两个请求接口，一个request.js普通请求封装和PC大致相同。另一个是文件请求封装 ，用upload.js去封装uni.uploadFile做请求拦截器

import store from "@/store";
import config from "@/config";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { toast, showConfirm, tansParams } from "@/utils/common";let timeout = 10000;
const baseUrl = config.baseUrl;const upload = (config) => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false;config.header = config.header || {};if (getToken() && !isToken) {config.header["Authorization"] = getToken();}// get请求映射params参数if (config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.url = url;}return new Promise((resolve, reject) => {uni.uploadFile({timeout: config.timeout || timeout,url: baseUrl + config.url,filePath: config.filePath,name: config.name || "file",header: config.header,formData: config.formData,success: (res) => {let result = JSON.parse(res.data);const code = result.code || 200;const msg = errorCode[code] || result.msg || errorCode["default"];if (code === 200) {resolve(result);} else if (code == 401) {showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then((res) => {if (res.confirm) {store.dispatch("LogOut").then((res) => {uni.reLaunch({ url: "/pages/login/login" });});}});reject("无效的会话，或者会话已过期，请重新登录。");} else if (code === 500) {toast(msg);reject("500");} else if (code !== 200) {toast(msg);reject(code);}},fail: (error) => {let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}toast(message);reject(error);},});});
};export default upload;

然后修改之前的前端API为

import upload from "@/utils/upload";export function fileUpload(data) {return upload({url: "/common/app/upload/" + data.fileType,name: data.name,filePath: data.filePath,});
}

        这里api解释一下，因为现在uniapp上传文件接口的差别，是创建一个临时url，我们去上传这个临时文件url到后端去保存的。

        所以前后端的接口都需要做调整，后端是拿到前端的文件然后转存到指定位置，再传回文件的路径。

后端API

	@PostMapping("/app/upload/{fileType}")public R appUpload(MultipartFile file,@PathVariable String fileType) {// 检查文件是否存在if (file.isEmpty()) {log.info("文件不存在，请检查路径：");throw new CustomException("文件上传失败");}String fileFolder = basePath + File.separator + "file";if (File.separator.equals("\\")) {// 本地windows测试fileFolder = "C:\\Users\\A\\Desktop\\rm-mes\\data\\file";}File imgFolder = new File(fileFolder);if (!imgFolder.exists()) {imgFolder.mkdirs();log.info("创建指定目录文件夹：" + fileFolder);}// 获取文件大小（字节）long fileSize = file.getSize();// 转换为MBdouble fileSizeInMB = fileSize / (1024.0 * 1024.0); // 使用1024.0确保结果为浮点数// UUID重新生成文件，防止重复覆盖String fileName = UUID.randomUUID() + "." + fileType;// xxx.jpg  xxx.mp4String filePath = fileFolder + File.separator + fileName;try {// 文件转存位置file.transferTo(new File(filePath));} catch (IOException e) {e.printStackTrace();}return R.ok().data("filePath", filePath).data("fileType", fileType).data("fileSize", fileSizeInMB);}

       文件的后缀是通过前端传过来的类型去保存的，按照之前PC端动态获取文件后缀的方式会失败，导致

然后到前端的签名图片上传

 async uploadSignature() {const blob = this.base64ToBlob(this.signature);const filePath = URL.createObjectURL(blob); // 创建一个临时的文件路径let data = { name: "file", filePath: filePath, fileType: "png" };const res = await fileUpload(data);this.editForm.responsibleSign = res.data.filePath;},base64ToBlob(b64) {const byteCharacters = atob(b64.replace("data:image/png;base64,", "")); // 把前缀去掉const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);const blob = new Blob([byteArray], { type: "image/jpeg" });return blob;},

       在我们签完名后，一般会拿到签名的base64编码，现在要根据接口的需求，创建一个临时URL放到请求中，所以第一步先调用base64ToBlob转成Blob后，再创建临时地址。最后创建请求体的数据，把文件的路径和文件类型即可，最后调用接口保存到服务器中~

uniApp

        如果不是H5的环境下上传文件会比较麻烦，需要考虑是app还是哪个第三方的小程序。因为在app中创建临时文件需要获取当前运行环境，还要获取一些设备权限。

         所以想要避免这种前端差异和麻烦，我们把后端文件上传接口，改成接收base64编码，在后端去转码成文件保存到服务器中。那么现在我们在前端需要写一个base64编码转换的方法。如果能直接拿到则跳过，直接调用请求api即可。

        现在不在H5环境下，签名会拿到一个图片的临时地址，但是这个地址不能通过第一种创建Blob方式临时http的形式传到后端。因为app不支持http的创建。下面写个方法去转码

export function pathToBase64(path) {return new Promise(function (resolve, reject) {// appif (typeof plus === "object") {plus.io.resolveLocalFileSystemURL(path,function (entry) {entry.file(function (file) {var fileReader = new plus.io.FileReader();fileReader.onload = function (evt) {resolve(evt.target.result);};fileReader.onerror = function (error) {reject(error);};fileReader.readAsDataURL(file);},function (error) {reject(error);});},function (error) {reject(error);});return;}// 微信小程序if (typeof wx === "object" && wx.canIUse("getFileSystemManager")) {wx.getFileSystemManager().readFile({filePath: path,encoding: "base64",success: function (res) {resolve("data:image/png;base64," + res.data);},fail: function (error) {reject(error);},});return;}reject(new Error("not support"));});
}

       现在我们拿到base64编码，那么其实就是一个字符串，我们不需要使用uni.uploadFile(),直接用uni.request()去上传，当做普通请求去处理，放到post请求的请求体中即可。

修改前端api

import upload from "@/utils/upload";
import request from "@/utils/request";export function fileUpload(data) {return request({url: "/common/app/upload",method: "post",data: data,});
}

修改后端api（用png图片做示例）

	@PostMapping("/app/upload")public R uploadBase64(@RequestBody FlierInfo flierInfo) {String base64 = flierInfo.getBase64();// 确定文件类型String fileType = "png";// 去掉前缀String base64Image = base64.replace("data:image/png;base64,", "");String fileFolder = basePath + File.separator + "file";if (File.separator.equals("\\")) {// 本地windows测试fileFolder = "C:\\Users\\A\\Desktop\\rm-mes\\data\\file";}File imgFolder = new File(fileFolder);if (!imgFolder.exists()) {imgFolder.mkdirs();log.info("创建指定目录文件夹：" + fileFolder);}// UUID重新生成文件，防止重复覆盖String fileName = UUID.randomUUID() + "." + fileType;// xxx.jpg  xxx.mp4String filePath = fileFolder + File.separator + fileName;Base64Util.GenerateImage(base64Image, filePath); // 转码成图片保存到指定路径return R.ok().data("filePath", filePath).data("fileType", fileType).data("fileSize", "");}

前端调用

import { fileUpload } from "@/api/mes/system/common";
import { pathToBase64 } from "@/utils/pathToBase64";async submit(ref) {// await this.uploadSignature();pathToBase64(this.signature).then(async (base64) => {// 保存base64图片await this.uploadSign(base64);}).catch((error) => {console.error(error);});},
async uploadSign(base64) {let data = {base64: base64,};const res = await fileUpload(data);this.editForm.responsibleSign = res.data.filePath;},

       H5和app的处理文件上传的记录到此，第一种方法在H5环境下拿到的base64编码其实可以直接发送到第二种情况的后端接口去做保存，万变不离其宗。