vue3 + antd 图片上传 （精简篇）cv即可

使用antd组件库里的 a-upload 上传图片 

template代码：

    
    

       
       
       
身份证头像面
    


    
    

       
       
       
身份证国徽面
    


    
    

       
       
       
手持身份证照片
    

a-upload 属性解析

• name：发到后台的文件参数名 （常用于同一页面需要写多个上传图片时）
• list-type：上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
• show-upload-list：是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon, showRemoveIcon 和 showDownloadIcon
• before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。
• customRequest：通过覆盖默认的上传行为，可以自定义自己的上传实现 （最常用）

script 代码：

// 初始值
let formTableData = ref({
  idCardzm: '',
  idCardbm: '',
  idCardsc: '',
});
//主要用图片上传前的限制操作（非必写）
const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('只能上传JPG、PNG格式图片!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('图片尺寸不能超过2MB!');
  }
  return isJpgOrPng && isLt2M;
};
// 图片上传
const loading = ref(false);
const handleChange = async (info) => {
  loading.value=true
  //info.filename的值与a-upload里的name对应，这样就可以多个位置都使用同一方法
  const idCard = info.filename
  const FormDatas = new FormData();
  FormDatas.append("multipartFile", info.file);
  //api.upload_uploadImages后端给的图片上传解析的接口方法
  const data = (await api.upload_uploadImages(FormDatas)).data
  loading.value=false
  //将后端返回的图片路径值赋给所在图片所绑定的值
  formTableData.value[idCard] = data
};

style代码：

.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.img {
  max-width: 100%;
  max-height: 100%;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

直接复制代码即可，回头补充删除图片事件