a-upload上传图片

a-upload上传图片

<a-upload
  list-type="picture-card"
  :file-list="fileList"
  :beforeUpload="beforeUploadMains"
  @change="handleChangeImg"
  :showUploadList="{
    
    showPreviewIcon: false
  }"
>
  <div v-if="fileList.length < 2">
  // 确定上传图片数量
    <a-icon type="plus" />
  </div>
</a-upload>

fileList: [],

beforeUploadMains(file, e) {
     
  let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
   if (!isJpgOrPng) {
    
     this.$message.error('格式错误，只能上传jpg、jpeg、png');
     return reject(false);
   }
   return false; // 阻止upload默认上传事件
 },
 handleChangeImg({
     fileList }) {
    
   this.fileList = fileList;
   console.log(this.fileList);
 },

效果

按钮上传

<a-upload
  list-type="picture"
  :fileList="fileList"
  :beforeUpload="beforeUploadMains"
  @change="handleChange"
>
  <a-button type="primary" @click="addmsg">新增</a-button>
</a-upload>

fileList: [],

beforeUploadMains(file, e) {
     
 let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
  if (!isJpgOrPng) {
    
    this.$message.error('格式错误，只能上传jpg、jpeg、png');
    return reject(false);
  }
  return false; // 阻止upload默认上传事件
},
handleChange(info) {
    
  // 上传图片api
  console.log(info);
},