UniApp文件上传（SpringBoot+Minio）

UniApp文件上传（SpringBoot+Minio）

一、Uni文件上传

（1）、文件上传的问题

UniApp文件上传文档

复制代码
1
2
3
4
5
6
7
8
9
10
	uni.uploadFile({
		url: 'https://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格式

复制代码
1
2
3
4
5
6
7
8
	//把传过来的图片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、发送请求

传给后端之前，告诉后端总共有几张图片要传过去

复制代码
1
2
3
4
5
6
7
8
9
10
11
	uni.uploadFile({
		url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
		files: 上边的filelist,
		formData: {
			//图片张数
			'length': 上边的filelist.length
		},
		success: (res) => {
			console.log(res.data);
		}
	});

3、后端接参

上边说了，后端用MultipartRequest接收参数

复制代码
1
2
3
4
5
    @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 是怎么上传文件的

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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要做下处理才能使用

复制代码
1
2
3
success: (res) => {
	JSON.parse(res.data);
}

二、文件上传的异步问题

uni的文件上传因为是异步，所以也要做些处理

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
			}
		})
	})
}

调用的时候

复制代码
1
2
3
4
5
upup.then(res => {
	//在此处做处理，因为是异步所以此处的res只能在此处用
	//无法声明变量把res赋值给他
	//因为赋值完毕后res还没跑完
})

完~，百度一查一群篮子货在哪儿复制粘贴博客，几页的答案一摸一样，一群篮子货。如有需要转载，记得标明出处。