如何使用UniApp结合SpringBoot和Minio实现文件上传功能？

2026-05-06 04:311阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计893个文字，预计阅读时间需要4分钟。

UniApp文件上传（SpringBoot+Minio）：

1.Uni文件上传（示例）：

- 使用uni.uploadFile方法，设置url为上传接口地址，files为图片地址对象。 - 示例代码：`uni.uploadFile({url: 'https://www.example.com/upload', files: {图片地址对象}})`

UniApp文件上传（SpringBoot+Minio）一、Uni文件上传（1）、文件上传的问题

UniApp文件上传文档

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还没跑完 }) 完~，百度一查一群篮子货在哪儿复制粘贴博客，几页的答案一摸一样，一群篮子货。如有需要转载，记得标明出处。迷途者寻影而行

标签：uniapp 文件上传 SpringBootMinIO