Ant Design Vue之自定义上传(Upload)

场景:项目中需要头像上传功能,后端提供的上传接口需要校验token。ant-design-vue框架upload组件提供了customRequest接口,可以让我们覆盖默认的上传行为,自定义上传。

1.目标实现效果如下

点击相机图标或者图片,打开资源管理器——>选择图片——>头像预览自动更换为最新选择的图片。执行上传之前还需一些图片格式、大小的校验。在此过程中需调用两个接口,第一个是上传图片的接口,返回图片地址;第二个是保存头像信息的接口,参数是上传接口返回的图片地址。

2.核心用法

customRequest  允许我们传入一个方法覆盖默认的上传行为

<a-upload
          name="file"
          listType="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :customRequest="uploadImage"
          accept="image/jpeg,image/jpg,image/png"
        >
          <div class="avatar">
            <img :src="imageUrl ? imageUrl : require('@/assets/images/avatar.png')"/>
            <a-icon class="uploading-icon" :class="avatarLoading&&'show'" type="loading"/>
            <div class="upload-icon">
              <img src="../../../assets/images/camera.png"/>
            </div>
          </div>
        </a-upload>

‘uploadImage’就是上传的方法,在此方法内,我们需要完成图片的校验与上传两个步骤。ant-design-vue虽然提供了beforeUpload钩子函数,允许我们在此函数内做一些校验,但是由于我们使用customRequest覆盖了默认的上传行为,此钩子函数不会执行。所以我把校验的步骤同样挪到了自定义的方法体内。

    // 上传头像前校验
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg/png格式的头像!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片不得大于2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    // 上传头像
    uploadImage(file) {
      this.avatarLoading = true
      const valid = this.beforeUpload(file.file)
      if (!valid) {
        this.avatarLoading = false
        return
      }
      const formData = new FormData()
      formData.append('file', file.file)
      api.upload(formData).then(res => {
        if (res) {
          this.imageUrl = res.data.data.link
          this.saveAvatar() // 保存新头像
          this.avatarLoading = false
        }
      }, err => {
        this.avatarLoading = false
      })
    },

 

 

 

 

 

发布了25 篇原创文章 · 获赞 6 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览