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"
          :beforeUpload="beforeUpload"
          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’就是上传的方法，在此方法内，我们需要完成图片的校验与上传两个步骤。或者把校验的过程放到beforeUpload方法内，beforeUpload方法会在uploadImage之前执行，若校验不通过则不会执行uploadImage。

    // 上传头像前校验
    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 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
      })
    },

3. 遇坑

上传文件到服务器时碰到一个问题就是有些文件可以成功上传，有些就会上传失败，查了一下原因，是因为服务器端使用的nginx反向代理中默认限制上传的文件大小为1M内。所以当前端上传的文件大于1M时就会上传失败。解决办法就是在服务器端改一下nginx的默认配置：client_max_body_size 4M; 这样就没问题了。