ant-design-vue 上传图片组件

Posted xiaoyun1121

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant-design-vue 上传图片组件相关的知识,希望对你有一定的参考价值。


<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;
    }

  

以上是关于ant-design-vue 上传图片组件的主要内容,如果未能解决你的问题,请参考以下文章

Ant-design-vue中如何实现图片上传?

Ant-design-vue中如何实现图片上传?

基于vue-Ant实现图片上传

如何上传图片到七牛云

ant-design-vue的upload上传后a标签下载没有token

uniapp 之使用 u-upload 组件来实现图片上传