ant-design-vue 上传图片组件

Posted 2020-11-22 xiaoyun1121

<a-upload name="multipartFile"
                        listType="picture-card"
                        class="avatar-uploader"
                        :showUploadList="false"
                        action="自己的api"
                        headers="{token:‘token值‘}"
                        :beforeUpload="beforeUpload"
                        @change="handleFrontImgChange">
                <a-popover v-if="idCardFront"
                           placement="top">
                  <template slot="content">
                    <img style="width:100%"
                         :src="idCardFront"
                         alt="正面" />
                  </template>
                  <a-icon v-if="loadingFront"
                          type="loading" />
                  <img v-else
                       style="width:100%"
                       :src="idCardFront"
                       alt="正面" />
                </a-popover>
                <div v-else>
                  <a-icon :type="loadingFront ? ‘loading‘ : ‘plus‘" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>

　　

    handleFrontImgChange (info) {
      if (info.file.status === ‘uploading‘) {
        this.loadingFront = true;
        return;
      }
      let res = info.file.response // 后端返回的数据
      if (info.file.status === ‘done‘) {
        this.loadingFront = false;

        if (res.status && res.status != ‘1‘) {
          this.$message.error(res.info)
          return
        }

        this.idCardFront = res.data.fileName
      }
      if (info.file.status === ‘error‘) {
        this.$message.error(res.error)
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === ‘image/jpeg‘ || file.type === ‘image/png‘;
      if (!isJPG) {
        this.$message.error(‘仅支持jpeg/png格式!‘);
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error(‘上传不能超过5MB!‘);
      }
      return isJPG && isLt2M;
    }