UniApp文件上传（SpringBoot+Minio）
- 2022 年 5 月 4 日
- 筆記
UniApp文件上传（SpringBoot+Minio）
一、Uni文件上传
（1）、文件上传的问题
uni.uploadFile({
url: '//www.example.com/upload', //仅为示例，非真实的接口地址
files: 图片地址对象数组,
formData: {
'user': 'test'
},
success: (res) => {
console.log(res.data);
}
});
官方给出得使用方法，但是。。。图片对象数组要以key-value存储
name = 文件名称，uri = 文件地址路径
这样就会有一个问题，后端无法用数组或集合取值，因为官方说如果name一样或者不写
那总不能写n个参数，后台用n个参数接把、很 cao单 的问题
（2）、解决思路
百度若干个小时，听了一堆一摸一样的屁话，找到一篇文章说 MultipartRequest，于是后台就用这个接参数，发现可以接到。
1、首先
uni拿到上传文件的图片地址数组对象，然后把他转成uni要求的key-value格式
//把传过来的图片path数组转为指定格式
var filelist = [];
for (var i = 0; i < imgList.length; i++) {
var obj = {};
obj.name = "img" + i;
obj.uri = imgList[i];
filelist.push(obj)
}
这样第一张图叫 img0 、、以此类推
2、发送请求
传给后端之前，告诉后端总共有几张图片要传过去
uni.uploadFile({
url: '//www.example.com/upload', //仅为示例，非真实的接口地址
files: 上边的filelist,
formData: {
//图片张数
'length': 上边的filelist.length
},
success: (res) => {
console.log(res.data);
}
});
3、后端接参
上边说了，后端用MultipartRequest接收参数
@PostMapping(value = "/upimg", headers = "content-type=multipart/form-data")
@ApiOperation("多文件上传")
public String upload(MultipartRequest request, Integer num) throws Exception {
return Result.ok(this.MinioUtils.putObject(request, num));
}
4、后端结合Minio的处理
上篇文章也说了 Minio 是怎么上传文件的
public List<String> putObject(MultipartRequest request, Integer num) throws Exception {
if (num == null || num < 1) {
throw new CustomizeException(ErrorCode.UP_IMAGE_NUM_IS_NULL);
}
// bucket 不存在，创建
if (!minioClient.bucketExists(this.bucket)) {
minioClient.makeBucket(this.bucket);
}
InputStream inputStream;
//返回的图片地址数组
List<String> imgList = new ArrayList<>();
try {
//循环多文件上传
for (int i = 0; i < num; i++) {
request.getFile("img" + i)//循环取文件并上传
imgList.add(文件地址);
}
} catch (Exception ex) {
throw new CustomizeException(ErrorCode.UP_IMAGE_ERROR);
}
return imgList;
5、uni处理返回结果
uni收到的返回结果是 String要做下处理才能使用
success: (res) => {
JSON.parse(res.data);
}
二、文件上传的异步问题
uni的文件上传因为是异步，所以也要做些处理
export function upup(list) {
//把传过来的图片path数组转为指定格式
var filelist = [];
for (var i = 0; i < list.length; i++) {
var obj = {};
obj.name = "img" + i;
obj.uri = imgList[i];
filelist.push(obj)
}
return new Promise((resolve, reject) => {
//上传图片
uni.uploadFile({
url: 请求地址,
files: filelist,
formData: {
'num': 图片张数
},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) => {
//返回的是字符需要转json
resolve(JSON.parse(res.data))
},
fail: (res) => {
reject
}
})
})
}
调用的时候
upup.then(res => {
//在此处做处理，因为是异步所以此处的res只能在此处用
//无法声明变量把res赋值给他
//因为赋值完毕后res还没跑完
})
