侧边栏壁纸
博主头像
龍啓博主等级

Vue development

  • 累计撰写 7 篇文章
  • 累计创建 5 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

uni.chooseImage选取图片造成应用刷新的问题

龍啓
2022-06-20 / 0 评论 / 0 点赞 / 26 阅读 / 1,397 字

uni.chooseImage选取图片造成应用刷新的问题

在uniapp 做选择文件的功能 有部分手机选择完后 会触发生命周期里的方法 会造成页面数据重新渲染,数据更新,造成图片选择不成功等问题,防止这种做法 我们有两种方式

一. 不要在onshow生命周期填写相关的函数操作,在onload做函数处理,不过这个方法有个弊端 就是当这个页面不是二级页面,就没有办法进行数据的实时更新,必须退出应用才会重新更新数据,不然就是一直读取之前onload请求的数据

二. 通过定义一个布尔值来判断是否为选择图片,因为的话,选择图片虽然会触发onshow方法,但不会把data的数据给重置了,所以这里我们还是可以拿到对应的数据

1.在data里定义一个布尔值,默认为false;

data() {
	return {
		isChoseImg: false
	}
},

2.在onshow生命周期里面加上一个条件判断,判断是否为选择图片触发,还是页面打开触发

onShow: function() {
	if (!this.isChoseImg) {
		const token = uni.getStorageSync('token')
		if (token) {
			this.getInfo()
		} else {
			const routes = getCurrentPages();
			const curRoute = routes[routes.length - 1].route
			if (curRoute !== 'pages/Login/Login') {
				uni.navigateTo({
					url: 'pages/Login/Login'
				})
			}
		}
	}
},

3.在选择文件的函数做一下布尔处理,在触发这个函数的时候,把状态改为true,表示已经开始选择中,页面不可触发onshow方法。然后在选择成功和取消选择两个行为中把状态改为false,表示选择已经结束,页面可以触发onshow方法

upload(type) {
	this.isChoseImg = true
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: (res) => {
			this.isChoseImg = false
			uni.uploadFile({
				url: 'https://file.cs08.cn/file/uploadUtil',
				header: {
					"Token": this.userToken
				},
				filePath: res.tempFilePaths[0],
				name: 'file',
				success: res => {
					let data = JSON.parse(res.data) //返回的是字符串,需要转成对象格式,打印data如下图
					if (data.code == 200) {
						if (type == 'photo') {
							this.$set(this.formData, 'DoctorImgUrl', data.data.url)
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: data.msg
						})
					}

				},
				fail: () => {}
			})
		}
	})
},
0

评论区