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

效果如下:

相关推荐
hanbarger10 分钟前
mybatis框架——缓存,分页
java·spring·mybatis
cdut_suye18 分钟前
Linux工具使用指南:从apt管理、gcc编译到makefile构建与gdb调试
java·linux·运维·服务器·c++·人工智能·python
苹果醋330 分钟前
2020重新出发,MySql基础,MySql表数据操作
java·运维·spring boot·mysql·nginx
小蜗牛慢慢爬行31 分钟前
如何在 Spring Boot 微服务中设置和管理多个数据库
java·数据库·spring boot·后端·微服务·架构·hibernate
azhou的代码园34 分钟前
基于JAVA+SpringBoot+Vue的制造装备物联及生产管理ERP系统
java·spring boot·制造
wm10431 小时前
java web springboot
java·spring boot·后端
smile-yan1 小时前
Provides transitive vulnerable dependency maven 提示依赖存在漏洞问题的解决方法
java·maven
老马啸西风1 小时前
NLP 中文拼写检测纠正论文-01-介绍了SIGHAN 2015 包括任务描述,数据准备, 绩效指标和评估结果
java
Earnest~1 小时前
Maven极简安装&配置-241223
java·maven
皮蛋很白1 小时前
Maven 环境变量 MAVEN_HOME 和 M2_HOME 区别以及 IDEA 修改 Maven repository 路径全局
java·maven·intellij-idea