文件上传App,H5,小程序多端兼容

插件地址:https://ext.dcloud.net.cn/plugin?id=5459

下载lsj-upload插件

代码如下

结构

html 复制代码
<lsj-upload :option="option" :size="size" :formats="formats" :debug="debug"
			:instantly="instantly" @change="onChange" @progress="onprogress"
@uploadEnd="onuploadEnd">
			<button class="btn">上传合同</button>
</lsj-upload>

js

javascript 复制代码
data(){
    return {
           // 上传接口参数
			option: {
				// 上传服务器地址,需要替换为你的接口地址
                // 该地址非真实路径,需替换为你项目自己的接口地址
				url: publicFun.wwwRequestUrl + "/gwiip-resource/XXX/put-file",
				// 上传附件的key
				name: 'file',
				// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				header: {
						// token
						"Blade-Auth": publicFun.publictoken()
				},
				// 根据你接口需求自定义body参数
				formData: {
						// 'orderId': 1000
				}
			},
            // 文件上传大小限制
			size: 50,
            // 限制允许上传的格式,空串=不限制,默认为空
			formats: '',
            // 是否打印日志
			debug: true,
            // 选择文件后是否立即自动上传,true=选择后立即上传
			instantly: true,
    }
},
methods:{
            // 文件选择回调
			onChange(files) {
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();

				// 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
			},
            // 上传进度回调
			onprogress(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();

			},
            // 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				// console.log(`${item.name}已上传结束,上传状态=${item.type}`);
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				
				// 构建接口数据
				let aaa = JSON.parse(item.responseText)
				this.contractParams.contractFileUrl = aaa.data.link
				uploadContract(this.contractParams).then(res => {
					console.log(res);
					if (res.data.code == "200") {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
				// 微信小程序Map对象for循环不显示,所以转成普通数组,
				// 如果你用不惯Map对象,也可以像这样转普通数组,组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();
			},
}

效果如下:

相关推荐
考虑考虑6 小时前
Jpa使用union all
java·spring boot·后端
用户3721574261356 小时前
Java 实现 Excel 与 TXT 文本高效互转
java
浮游本尊7 小时前
Java学习第22天 - 云原生与容器化
java
渣哥9 小时前
原来 Java 里线程安全集合有这么多种
java
间彧9 小时前
Spring Boot集成Spring Security完整指南
java
间彧9 小时前
Spring Secutiy基本原理及工作流程
java
Java水解10 小时前
JAVA经典面试题附答案(持续更新版)
java·后端·面试
洛小豆13 小时前
在Java中,Integer.parseInt和Integer.valueOf有什么区别
java·后端·面试
前端小张同学13 小时前
服务器上如何搭建jenkins 服务CI/CD😎😎
java·后端
ytadpole13 小时前
Spring Cloud Gateway:一次不规范 URL 引发的路由转发404问题排查
java·后端