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