a-upload上传图片

最新推荐文章于 2024-03-22 10:51:06 发布

Mr.Meng_95

最新推荐文章于 2024-03-22 10:51:06 发布

阅读量2.8k

点赞数 1

分类专栏：项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_30351747/article/details/126243879

版权

项目专栏收录该内容

174 篇文章 10 订阅

订阅专栏

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