vue3专栏项目 -- 六、上传组件(下)

1、创建文章页面实现 Uploader 样式自定义

首先要完成的是这个样式的自定义,还有这个文件类型和大小的验证,还有就是上传完后图片的展示,这3部分之前写Uploader体验过这样的流程,现在我们来把它更加具象化

我们之前做上传组件的时候,在Home组件和新建文章组件即CreatePost组件中展示出来测试,所以先把之前的测试数据删除

接下来我们就添加Uploader组件的自定义,自定义第一要务就是样式,也就是我们添加的自定义模板和自定义CSS

接下来我们来添加 上传状态的,即loading这个template

再添加上传成功的template

这个图片大小,我们是通过object-fit: cover;实现的,如下

2、创建文章最后流程

(1)添加文件上传的验证

之前我们有做过上传前验证的类似代码,但是我们这里就把它抽象成通用的函数,验证关键是验证文件的格式和大小,所以我们做个通用参数。

如下,我们把之前验证文件格式的代码抽离出来放在generateFitUrl中了,后续哪里要用到这个验证逻辑就直接调用这个函数即可

然后我们还在上传前的验证函数beforeUploadCheck中写了验证文件大小和类型的逻辑,如下,这个函数中我们要接用户选择的文件即file以及我们定义的合法规则condition(这个condition中有我们定义的合法的类型和大小),然后开始逻辑。

通过{}先拿出我们定的合法的文件类型和大小;然后判断用户选择的文件的类型和大小是否合法;然后因为如果有报错的话我们最后需要返回是因为什么出错的,所以我们定义一个error,然后定义一个类型即ErrorType有三种,分别表示不同的错误提示;然后判断是因为什么出错对应给出error类型;最后把验证结果和报错内容返回即可

然后我们使用这个函数,如下在CreatePost组件中

定义一个函数做上传前的检查函数即uploadCheck,然后调用上面这个beforeUploadCheck函数得到验证结果后,根据返回的结果做对应错误提示以及返回是否通过验证的passed结果

(2)发送异步请求创建文章

提到异步请求,我们首先想到store中创建action,即在actions中创建一个新建文章的post请求

然后我们来使用,我们之前点击创建文章的时候用的还是commit,现在我们来修改一下

看接口文档,如下提交一下信息

所以在新建文章组件中即CreatePost中,在发起新建文章的请求前,先把这些东西获取到。

用户上传的那个图片的时候,不是上传时会发送一个post请求把文件传给后端嘛,然后请求成功回来后是有返回的数据的,数据中有后端为传过来的这个图片给一个id,这个id就是这个图片image的id,然后我们新建文章的时候要提交的数据中就有这个image的编号。

所以这个image的获取我们是在上传组件的post请求成功后的.then中获取的,然后数据又是子组件传给父组件,所以使用emits-this.emit来传的,所以如下,上传组件中请求成功后是通过这个调取父组件这个file-uploaded方法来把image编号传过去的

然后父组件中定义这个file-uploaded方法,在这个方法中即可获取这个图片的编号了,也就是image,如下

然后其他的title、content、column、author这些,在当前用户user中或者用户填的框中可以有,所以如下

然后新建文章要传的东西准备好了后,就去调action中这个去发起新建文章的请求

如下,新建文章创建后,就看到文章发表啦

3、文章详情页

大致就是:

创建对应的页面(Views)和路由(Router) --> 创建跳转链接(ColumnDetail页面) --> 发送获取单独文章的请求(Store 和 Views) --> 分析返回数据结构和需求

看接口文档返回的数据

后端数据返回的是比如“## 111”,这就是markdown格式的,而我们要展示HTML所以安装markdown-it,怎么使用呢,如下

我们先引入markdown-it,然后new一个markdown实例,然后通过render()渲染成一个HTML的格式,然后数据就从“## 111” 变成<h2>111</h2>了,然后用v-html属性就可以变成‘111’,如下

最终代码为如下:

额外,说一个经常会遇到的ts问题,

如下,就是说image现在可能是ImageProps或者string联合类型,我们在代码中直接取了它的fitUrl属性,但是fitUrl只有ImageProps中才有,所以得使用type guard将它的类型缩小,如果这个时候image是string,那么自然整个程序就会抛出错误而中止,所以ts就报错

这里解决方式就是type guard ,将范围缩小,所以可以如下去改,在前面加一个if的条件,将string排除在外,这样代码就安全了,提示报错也就消失了

  • 15
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值