一、Ant Design Vue文件上传功能

1. 文件上传选项框

    <a-modal
         title="上传文件"
         :footer="null"//不显示底部按钮
         :visible="visible"//是否显示
         :confirmLoading="confirmLoading"//确定按钮 loading
         @cancel="handleCancel"//取消方法
       >
         <a-upload
           :fileList="fileList"//上传的文件列表
           :remove="handleRemove"//文件删除方法
           :beforeUpload="beforeUpload"//上传文件之前的钩子，参数为上传的文件
         >
           <a-button>
             <a-icon type="upload" />选择文件
           </a-button>
         </a-upload>
       </a-modal>
   <div class="streetAdd">
         <a-button type="primary" icon="plus" @click="engineeringadd()">新增</a-button>
         <a-button type="primary" icon="file" @click="showModal()">数据导入</a-button>
       </div>
   

    

2. js实现代码

   //定义的变量
   <script>
   export default {
   	data() {
   	    return {
   	      visible: false,
   	      confirmLoading: false,
   	      fileList: [],
   	      IpConfig: this.IpConfig.projectServiceDomain,
   	    }
   	  },
   	mounted: function () {
   	    this.engineeringList()
   	    //that.alarmTypes=res.data.res.dictionaryList;
   	  },
   	   methods: {
   		   //点击数据导入按钮所调用的方法
   		    showModal() {
   		      this.visible = true
   		    },
   		    //对话框确认方法
   		    handleOk(e) {
   		      this.visible = false
   		      this.confirmLoading = false
   		    },
   		    //关闭弹框
   		    handleCancel(e) {
   		      //console.log('Clicked cancel button')
   		      this.visible = false
   		    },
   		    //删除上传文件
   		    handleRemove(file) {
   		      const index = this.fileList.indexOf(file)
   		      const newFileList = this.fileList.slice()
   		      newFileList.splice(index, 1)
   		      this.fileList = newFileList
   		    },
   		    //显示上传文件内容
   		    beforeUpload(file) {
   		      this.spinning = true
   		      var that = this
   		      that.visible = false
   		      //文件类型
   		      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
   		      if (fileName != 'xlsx' && fileName != 'xls') {
   		        this.$message.error('文件类型必须是xls或xlsx!')
   		        this.spinning = false
   		        that.visible = true
   		        return false
   		      }
   		      //读取文件大小
   		      var fileSize = file.size
   		      //console.log(fileSize)
   		      if (fileSize > 1048576) {
   		        this.$message.error('文件大于1M!')
   		        this.spinning = false
   		        that.visible = true
   		        return false
   		      }
   		      let fd = new FormData()//表单格式
   		      fd.append('file', file)//添加file表单数据
   		      let url = this.IpConfig + '/xing/jtGongLuShouFeiZhan/upload'
   		      this.$ajax({
   		        method: 'post',
   		        url: url,
   		        data: fd,
   		        headers: {
   		          'Content-Type':
   		            'multipart/form-data;boundary=' + new Date().getTime(),
   		        },
   		      })
   		        .then((rsp) => {
   		          console.log(rsp)
   		          let resp = rsp.data
   		          if (rsp.status == 200) {
   		            that.fileList = []
   		            that.visible = false
   		            that.confirmLoading = false
   		            that.$message.success('文件上传成功!')
   		            this.spinning = false
   		          } else {
   		            this.$message.error('文件上传失败!')
   		            that.visible = true
   		          }
   		        })
   		        .catch((error) => {
   		          this.$message.error('请求失败! error:' + error)
   		          this.spinning = false
   		          that.visible = true
   		        })
   		      return false
   		    }
   	    }
       }
   </script>