UniApp文件上传(SpringBoot+Minio)

UniApp文件上传(SpringBoot+Minio)

一、Uni文件上传

(1)、文件上传的问题

UniApp文件上传文档

 uni.uploadFile({   url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址   files: 图片地址对象数组,   formData: {    'user': 'test'   },   success: (res) => {    console.log(res.data);   }  }); 

官方给出得使用方法,但是。。。图片对象数组要以key-value存储
name = 文件名称,uri = 文件地址路径
这样就会有一个问题,后端无法用数组或集合取值,因为官方说如果name一样或者不写

image

那总不能写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: 'https://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还没跑完 }) 

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

商匡云商
Logo
注册新帐户
对比商品
  • 合计 (0)
对比
0
购物车