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

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

下载lsj-upload插件

代码如下

结构

<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

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();
			},
}

效果如下:

最近更新

  1. TCP协议是安全的吗?

    2024-04-22 22:06:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-22 22:06:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-22 22:06:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-22 22:06:02       20 阅读

热门阅读

  1. 鸿蒙HarmonyOS开发规范-完善中

    2024-04-22 22:06:02       19 阅读
  2. 前端网络---三次握手四次挥手

    2024-04-22 22:06:02       16 阅读
  3. Vue-条件渲染(初识vue渲染)

    2024-04-22 22:06:02       19 阅读
  4. Vue之事件绑定(初识Vue事件)

    2024-04-22 22:06:02       13 阅读
  5. vue中v-model的值可以写三元判断么?

    2024-04-22 22:06:02       54 阅读
  6. centos开机自启的方式总结

    2024-04-22 22:06:02       33 阅读
  7. 使用TP8框架根据视频id查找所有评论和回复

    2024-04-22 22:06:02       15 阅读
  8. 代码随想录算法训练营day48

    2024-04-22 22:06:02       14 阅读
  9. 【Python-第三方库】cv2

    2024-04-22 22:06:02       14 阅读
  10. All in One mini主机搭建全屋主路由方案

    2024-04-22 22:06:02       38 阅读