uniapp项目tabbar页面的编辑

最新推荐文章于 2025-04-08 16:23:55 发布

Thousand森森

最新推荐文章于 2025-04-08 16:23:55 发布

阅读量178

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_49827007/article/details/132475501

版权

文章讲述了作者在uniapp开发中遇到的问题，包括如何通过事件总线和uniappAPI传递数据给编辑页面，以及如何处理图片数据格式转换，以便在控件中正确显示。特别关注了tabbar的参数传递限制和图片URL的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我有两个页面，一个是我的文章列表，在这里，有一个编辑按钮，我可以修改我的文章；
然后，有另一个页面，他的原身是发布文章的页面，现在将数据绑定上去，用来编辑文字内容。
那么我首先要将数据发送过去，这是难点之一；难点之二是，将相册组件的数据渲染出来。

第一个：
将数据发过去：
1.
我一开始用url传递，但是被告知，url传递一般是有限制的。
2.
后来我了解到事务总线，遂使用，但是没有使用relauch的事件响应，所以没有成功
3.后来我了解到，uniapp有自己的传递事件的api，遂使用，但是发现，我的页面是tabbar，所以用navigaTo是不可以的。而switchBar不可以传参，并且它的返回参数没有返回eventChannel对象，所以不行
4.我去搜tabbar怎么传参，别人是保存在缓存、或者app对象里面

随成功

第二个：
将数据成功显示：
1.我传过去的对象，他有Thumbnail，但是没有blob图像地址，而这个组件只能读取图像地址，怎么办呢：
要转换！

		this.article.AttachList.forEach(item => {
					if (item.FileType.slice(0, 5) == 'image') {
						const blob = new Blob([item.Thumbnail], {
							type: `{item.FileType}`
						})
						const blobUrl = URL.createObjectURL(blob)
						const newItem = {
							name: item.FileName,
							size: item.FileSize,
							thumb: blobUrl,
							type: item.FileType,
							url: blobUrl
						}
						this.fileImages.push(newItem)
					}

如此这般

2.那么现在我的数据正是指向这个控件的数据了，再添加图片的时候，会有原来的数据。


			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file instanceof Array ? [...event.file] : [event.file];
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				console.log('lists', lists)
				this.fileImages.push(...lists); // 将 lists 添加到 fileImages 数组中
				console.log('fileImages', this.fileImages);


			},

为什么我的控件在页面里也没有渲染出来呢？是需要在这个控件的:fileList属性里面，将这个数组绑定进去，这样子这个图片才能正确显示
<u-upload :fileList=“fileImages” @afterRead=“afterRead” @delete=“deletePic” name=“1” multiple
:maxCount=“10”>