实际开发中，ant design vue的上传组件的使用

实际开发中，ant design vue的上传组件的使用

html

<div class="right" v-if="$store.state.user.userDesc.id === '1'">
    <img :src="saveUploadImage || currentData.pictureUrl || defaultService" />
    <a-upload 
        accept=".png,.jpg,.jpeg"    // 文件限制类型
        :showUploadList="false"      // 是否显示上传的文件列表  默认true
        :file-list="fileList"       // 文件上传列表
        :before-upload="beforeUploadFile"   // 文件上传之前的回调：用于限制上传的文件
        :customRequest="customRequest"     // 自定义上传请求   ： 代替action属性
        @change="handleChange"
        :multiple="false"    // 禁止上传多个
        style="width: 100%;text-align:center;display: inline-block;margin-top:25px;" >
    	<a-button type="link">上传/重新上传 </a-button>
    </a-upload>
</div>

逻辑层

import defaultService from '@/assets/img/share/defaultService.png'  // 默认图片
import {uploadImage} from '@/api/shareCenter/index.js'   // 上传的后端接口
// 拖拽组件
export default {
  name: "ServiceInfo",
  props : ['currentData'],
  data() {
    return {
        defaultService,
        fileList : [],
        saveUploadImage : null
    }
  },
  components: {
  },
  methods: {
    handleChange({ file, fileList }) {
        this.fileList = fileList
    },
    beforeUploadFile (f, l) {
      // 后端控制上传的文件大小上限为：20M
      const isLt20M = f.size / 1024 / 1024 < 20
      if(!isLt20M) {
        this.$message.error(f.name + '文件大小超出限制，请修改后重新上传')
        return false
      } else {
        return true
      }
    },
    // 自定义请求
    customRequest(data) {
        const formData = new FormData();
        formData.append('file',data.file),
        uploadImage(this.currentData.id,formData).then(res=>{
            if(res.data.success) {
                this.saveUploadImage = res.data.data
            } else {
                this.$message.error('上传失败')
            }
        })
    }
  }
};

官网ant-design for Vue