uni文件上传及后台获取文件
admin
2024-02-17 10:12:21
0

需求1:前端提交表单时附件跟着一起发送给后台
需求2:前台获取后台附件
我这里并没有使用扩展组件,都是官方API

//前端代码
上传附件

//显示图片名称 currentFilesPath-数组文件/单个文件 、previewFile-预览文件
{{(index + 1) + '、' + file.name}}//图标,可有可无,我这个图标含义是删除对文件。

选择文件

          openFile() {uni.chooseFile({count: 10,//选择文件个数,默认100extension: ['.doc', '.ppt','.xls', '.pdf', 'docx', '.jpg', '.png', '.jpeg','text'],//可选择文件类型// type: 'all',//支持所有类型文件success: (res) => { //res == 选择文件本地临时文件路径列表//遍历多图片,并将每个图片有用信息提取出来,设置为一个对象res.tempFilePaths.forEach((item, index) => {this.currentFilesPath.push(res.tempFiles[index++])//页面显示文件名称let tmp = {};tmp.name = 'files';tmp.uri = item;this.tempFile.push(tmp)//将temFile数组数据发给后台})}});},

发生数据

            doSave(){//点击提交按钮,触发该函数uni.uploadFile({//会自动执行url: 'xxxxx',//后台结束数据路径files: this.tempFile,//需要上传文件数据name: 'files',header: {'content-type':'multipart/form-data; boundary=----WebKitFormBoundaryHEdN1AIjcdUkAaXM',},formData: {//"data": JSON.stringify(postData)//"data":表单数据},success: (res) => {//成功提交},fail: (err) => {//提交失败}});}

后台代码

@RequestMapping(value = "xxxxx", method = {RequestMethod.POST})@ApiOperation(value = "", notes = "", httpMethod = "POST")public SuccessResponse confirm(HttpServletRequest request) {//获取前端上传的文件+表单List multipartFiles = ((MultipartHttpServletRequest) request).getFiles("files");//文件数据String khTsData = request.getParameter("data");//表单数据,还需要将这个字符串转为对象。}

预览后台文件-前台代码

           previewFile(savePath, type) {let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];var file = [];let filePath = 'xxxxx‘  //后台获取文件流的地址file.push(imgepath);//if (!fileType.includes(type)) { //不包含	fileType类型,所以预览其他类型文件uni.previewImage({//预览图片API方法urls: file,//*主要这个地址是文件资源地址,并不是文件临时地址*,,只接受数组longPressActions: { //获取带图片长按图片显示操作菜单,默认保存itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('加载成功')},fail: function(err) {console.log(err.errMsg);}}});}else{uni.downloadFile({//预览包含fileType文件url: img,success: (res) => {if (res.statusCode === 200) {uni.openDocument({filePath: res.tempFilePath,success: function(res) {console.log('打开成功');}});}}});}

后台获取文件流

 @ControllerLogExeTime(description = "下载文件", log = false)@RequestMapping(value = "**xxxxx", method = { RequestMethod.GET })@ApiOperation(value = "下载文件", httpMethod = "GET")@ApiImplicitParams({})@ResponseBodypublic void download(HttpServletRequest request, HttpServletResponse response) throws IOException {//返回一个文件流给浏览器,然后浏览器自己会将这个文件流转为文件}

相关内容

热门资讯

女生说今天好热啊该怎么回复 女生说今天好热啊该怎么回复高情商回复如下:1、“你很热吗,那我给你讲个冷笑话中和一下吧,然后你就找个...
一家人过河的问题 一家人爸爸 ... 一家人过河的问题 一家人爸爸 妈妈 2儿子 2女儿 一个管家 一条狗爱因斯坦的智力题目得买7张票,宠...
作为强国一代的青年大学生,在宏... 作为强国一代的青年大学生,在宏伟壮阔的科技强国梦中应该有着怎样的使命和担当?作为强国一代的青年大学生...
催眠大师的电影里所用到的心理学... 催眠大师的电影里所用到的心理学常识和原理是什么?《催眠大师》的引导方式是瞬间催眠,在现实人群中只有少...
我是个什么样的人,谁能帮我分析... 我是个什么样的人,谁能帮我分析一下,谢谢了?自己是什么样的人,没有和你接触,没有和你交往过,肯定不会...
求桔子树的早期作品集 求桔子树的早期作品集《片段》《妖孽并出》《暗涌》《Ne me quitte pas》《左右之间》《我...
一个人一个世界 那两个人几个世... 一个人一个世界 那两个人几个世界?一个人一个世界,两个人也是一个世界,因为(另一个)是他喜欢的人,他...
巨魔盗贼PVP 怎么样? 巨魔盗贼PVP 怎么样?同上可以说没有优势~PVE还行~是要看种族天赋的~
云南盘鮈鱼能吃吗 云南盘鮈鱼能吃吗能吃啊,而且很好吃的。
急求一篇写初中生的校园故事作文... 急求一篇写初中生的校园故事作文(记叙文)在学校发生的,真实点急求一篇写初中生的校园故事作文(记叙文)...
安徽基础教育平台学生完成后教师... 安徽基础教育平台学生完成后教师怎么遴选视频?安徽基础教育平台学生完成后,教师怎么遴选视频可以根据一些...
有人知道这是个什么鸟吗? 有人知道这是个什么鸟吗?灰喜鹊…………+幼雏喜鹊,还很小,看起来都很脆弱幼雏很难变认,有点像灰喜雀幼...
清扬控油洗发水是不是有激素洗了... 清扬控油洗发水是不是有激素洗了头发就不油,然后换其他洗发水就很油。现在根本没法用其他洗发水了。有一款...
阴阳师人生赢家成就是什么 阴阳师人生赢家成就是什么人生赢家成就就是那个日御悄月同辉啊,同时达成全图鉴和非态拆没帆纳洲大阴阳师成...
主角武器是飞扬枪跋扈盾的网游小... 主角武器是飞扬枪跋扈盾的网游小说主角武器是飞扬枪跋扈盾的网游小说《正前方》更新超级慢
真的有白蛇白素贞这个人吗? 真的有白蛇白素贞这个人吗?我刚刚看了百家讲坛,白素贞这个人是没有的,她是一个小说的角色。并且她的角色...
迪丽热巴拍过的电影或电视剧你认... 迪丽热巴拍过的电影或电视剧你认为如何?我认为还是很不错的,迪丽热巴的演技是很好的,她长得也是比较漂亮...
求南派三叔所有与盗墓笔记有关的... 求南派三叔所有与盗墓笔记有关的书、文章(各种番外、特别篇、贺岁篇)(只要名字就好),谢谢啦~《吴邪的...
范增和张良什么关系 范增和张良什么关系范增是项羽谋士,张良为刘邦谋士,各为其主,战场上是敌对关系
像《觅渡》之类的书有哪些 像《觅渡》之类的书有哪些写一些推荐的书知识性比较强的 比较容易懂的钱穆 湖上闲思录