Ant Design Upload 文件上传功能

心已赠人 2022-12-23 09:33 807阅读 0赞

# 一、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>