文件上传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();
			},
}

效果如下:

相关推荐
oioihoii28 分钟前
深入理解 C++ 现代类型推导:从 auto 到 decltype 与完美转发
java·开发语言·c++
韩立学长1 小时前
【开题答辩实录分享】以《租房小程序的设计和实现》为例进行答辩实录分享
java·spring boot·小程序
zl9798991 小时前
SpringBoot-数据访问之MyBatis与Redis
java·spring boot·spring
K_i1341 小时前
Tomcat核心原理与运维实战指南
java·运维·tomcat
重生之我是Java开发战士1 小时前
【Java EE】快速上手Spring Boot
java·spring boot·java-ee
從南走到北1 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
go__Ahead2 小时前
【Java-JMM】Happens-before原则
java
future_studio2 小时前
聊聊 Unity(小白专享、C# 小程序 之 联机对战)
unity·小程序·c#
隔壁程序员老王2 小时前
基于 Python 的坦克大战小程序,使用 Pygame 库开发
python·小程序·pygame·1024程序员节