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一样或者不写

那总不能写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) => {//返回的是字符需要转jsonresolve(JSON.parse(res.data))},fail: (res) => {reject}})})
}

调用的时候

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

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

UniApp文件上传相关推荐

uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件
uniapp文件上传组件,支持图片.视频上传 html部分: <template><view class="annex-wrap"><view cla ...
uniapp 文件上传 2021-06-10
25548007-ef87ff5dd31946eb.png 帝高阳之苗裔兮,朕皇考曰伯庸. 摄提贞于孟陬兮,惟庚寅吾以降. 皇览揆余初度兮,肇锡余以嘉名: 名余曰正则兮,字余曰灵均. 纷吾既有此内美兮 ...
uniapp微信小程序选择聊天记录文件上传
目录精简版总结示例容易踩的坑 1.页面刷新问题 2.extension问题精简版总结单文件 wx.chooseMessageFile({count: 1,//限制选择的文件数量type: ' ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
uniapp 图片上传与展示
项目场景: uniapp 图片上传阿里 OSS 对象存储需求描述: H5移动端开发中需要用户上传图片头像.身份证件等需求时.需要将图片上传至阿里oss中存储,并且下载到当前页面进行展示. 解决方 ...
uniapp 图片上传删除
uniapp我的示例:如下点击加号图片:选择上传类型:图片或者文件上传的图片可以删除这是界面上的一系列操作,接下来我们来看如何代码实现吧一.界面代码:展示图片 <view class=& ...
uniapp图片上传与压缩，兼容小程序与H5
图片上传借助了Uview2.0的组件 <u-upload :fileList="imgs" :name="" @afterRead="after ...
springboot设置文件上传大小（tomcat默认1M）
application.yml # 设置文件上传大小(tomcat默认1M) server:tomcat:max-http-form-post-size: -1 spring:servlet:mult ...
将文件上传至ftp服务器，FTP文件上传工具类，将文件上传至服务器指定目录
将文件上传至ftp服务器,传入File对象,将文件上传至ftp服务器需要配置修改的点: 1. 服务器ip端口(服务器ip 端口22/21). 2. 服务器账号密码(服务器登录用户名密码). 3. 上 ...

UniApp文件上传

UniApp文件上传（SpringBoot+Minio）

一、Uni文件上传

（1）、文件上传的问题

（2）、解决思路

1、首先

2、发送请求

3、后端接参

4、后端结合Minio的处理

5、uni处理返回结果

二、文件上传的异步问题

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

UniApp文件上传相关推荐

最新文章

热门文章