uni文件上传及后台获取文件

news/2024/7/20 1:07:06 标签: java, 小程序

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

java">//前端代码
<view >
	<wt-button type="primary" @click="openFile">上传附件</wt-button>
</view>
//显示图片名称 currentFilesPath-数组文件/单个文件 、previewFile-预览文件
<view>
    <scroll-view scroll-y>
		<view>
		    <view v-for="(file, index) in currentFilesPath">
			     <text @click='previewFile(file.path,file.type)'>{{(index + 1) + '、' + file.name}}</text>
				   <icon :type="iconType" style="margin-left: 20px;" size="20" @click="deleteFile(index)" />//图标,可有可无,我这个图标含义是删除对文件。
			</view>
		</view>
	</scroll-view>
</view>

选择文件

java">          openFile() {
				uni.chooseFile({
					count: 10,//选择文件个数,默认100
					extension: ['.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数组数据发给后台
						})
					}
				});
			},

发生数据

java">            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) => {
							//提交失败
						}
					});

                }

后台代码

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

预览后台文件-前台代码

java">           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('打开成功');
									}
								});
							}
						}
					});
			    }

后台获取文件流

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

http://www.niftyadmin.cn/n/11860.html

相关文章

CAR_CTS应用的命令

♥️作者&#xff1a;小刘在C站 ♥️每天分享云计算网络运维课堂笔记&#xff0c;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的&#xff0c;绽放。 承若平均速率的配置方法 Router(config)#access-list 100 permit ip any host 192.168.1.1 …

十大排序(总结+算法实现)

十大排序&#xff08;总结算法实现&#xff09; 十大排队的性能分析 冒泡排序 使用冒泡排序&#xff0c;时间复杂度为O(n^2),空间复杂度为O(1) 像气泡一样从低往上浮现 vector<int> bubbleSort(vector<int>nums) {int lengthnums.size();for(int i0;i<lengt…

阿里大咖纯手写的微服务入门笔记,从基础到进阶直接封神

前言 学习是一种基础性的能力。然而&#xff0c;“吾生也有涯&#xff0c;而知也无涯。”&#xff0c;如果学习不注意方法&#xff0c;则会“以有涯随无涯&#xff0c;殆矣”。 学习就像吃饭睡觉一样&#xff0c;是人的一种本能&#xff0c;人人都有学习的能力。我们在刚出生的…

期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…

代码随想录训练营第32天|LeetCode 122.买卖股票的最佳时机II、55. 跳跃游戏、45.跳跃游戏II

参考 代码随想录 题目一&#xff1a;LeetCode 122.买卖股票的最佳时机II 按照自己的想法&#xff0c;无非就是在最低点买入&#xff0c;在最高点卖出&#xff0c;因此只需要找到成对的极小值和极大值&#xff0c;就可以计算利润了。代码实现如下&#xff1a; class Solutio…

28线性空间02—— 坐标变换

💖💖感谢各位观看这篇文章,💖💖点赞💖💖、收藏💖💖、你的支持是我前进的动力!💖💖 💖💖感谢你的阅读💖,专栏文章💖持续更新!💖关注不迷路!!💖 矩阵线性代数笔记整理汇总,超全面 文章目录 坐标变换参考线性空间01——线性空间、线性相关、…

【二八法则】精品和爆款的力量

引子 最近写了不少博文&#xff0c;但涨粉还是不快。新增粉丝主要来自《掌握这十个Linux命令&#xff0c;秒变Linux老手》这篇文章&#xff0c;短短三天&#xff0c;阅读量达到2000以上&#xff0c;而我目前最高的一篇文章的阅读量不过3218&#xff0c;已经是几年前一篇生活日…

java-php-python-ssm家电售后管理系统 演示录像 2021计算机毕业设计

java-php-python-ssm家电售后管理系统 演示录像 2021计算机毕业设计 java-php-python-ssm家电售后管理系统 演示录像 2021计算机毕业设计本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea eclipse 前端技术&a…