vue ant Upload 上传

单个页面上传

二话不说 上代码

<!-- 单个页面上传   vue ant Upload 上传-->
<template>
  <!-- action 上传地址 
       name 发送后台的参数名
       beforeUpload 上传前的限制条件
       accept 接受文件类型
       headers 请求头
       fileList 文件列表
       handleChange 文件改变时的钩子函数
  -->
  <a-upload :action="uploadUrl" name="image" :accept="accept" :headers="tokenHeader" :beforeUpload="beforeUpload" :file-list="fileList" @change="handleChange">
    <a-button> <a-icon type="upload" /> Upload </a-button>
  </a-upload>
</template>
<script>
export default {
  data() {
    return {
      action: '',//上传地址
      accept:".png,.jpg,.pdf",//接受文件类型(png,jpg,pdf)
      tokenHeader:{token},//请求头()存放对应的token
      fileList: [
        {
          url: '',//编辑时的图片地址
        },
      ],
    }
  },
  methods: {
    beforeUpload(file,fileList){// 上传前的限制 大小 类型
     const limitSize=file.size/1024/1024<5;
     if(!limitSize){
      this.$message(file.name+"文件大小不能超过5M")
      return false;
     }
    //  判断上传格式 (第1种)
    //  const limitType=file.type==="image/png"||file.type==="image/jpg"||file.type==="image/jpeg"||file.type==="application/pdf";
    //  if(!limitType){
    //   this.$message.warning(file.name+"文件格式不正确")
    //   return false;
    //   }

    // 判断上传格式 (第2种)
    let extension=file.name.split(".")[1]==='doc';
    let extension1=file.name.split(".")[1]==='jpg';
    if(!extension && !extension1){
      this.$message.warning(file.name+"文件格式不正确")
      return false;}
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        if (info.file.response.code === 0) {
          this.fileList = [...this.fileList, info.file.response.data]

          this.fileList=this.fileList.slice(0,1)//限制上传一个
          return false
        }
        }
    },
  }
}
</script>
<style></style>

上传封装调用