【upload导入、导出】

系列文章目录

---

`提示：文件导入|导出

---

前言

提示：这里可以添加本文要记录的大概内容：

几个a-upload组件属性讲一下
:data 属性是确定几个文件可设置多个
:beforeUpload 属性是上传前对文件限制
:customRequest 属性是对上传的文件处理(很重要)
之后的img标签用于展示
span标签是为了绑定删除事件
2.编写javascript中代码
beforeUpload

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、a-upload ？

  <a-upload
              :file-list="fileList"
              :before-upload="beforeUpload"
              :default-file-list="fileList"
              :show-upload-list="false"
              @change="uploadChange"
                
              >
               <a-button  style="width:170px;height:25px;border:0;margin:0px; display:inline-block;">
                  导入
                </a-button>
 </a-upload>

 beforeUpload (file) {
 
    if (file.size >= this.fileSize) {
      this.$message.warn(`请选择${this.fileSize / 1024 / 1024}M类型的附件`)
      this.isReturnFalse = true
      return false
    }
    this.fileName = file.name
    this.fileList = [file]
    return false
  },

 uploadChange(info){
	if(this.fileList && fileList.length >0){
	let that = this
	let formData = new formData()
	formData.append('fileData',this.fileList[0])
const config = {
	headers:{'Content-Type': 'multipart/form-data'},
	showLoading:true,
	showResponse:true,
}
	axios.post('',formData,config,{showLoading:true})
.then(
	function(res){
    	if(res.data.responseCode === '200'){
	that.$message.success('导入成功')
	that.fileList = []

   setTimeout(function() {
   	 that.dataLists = []
   	 that.fetchList()
   },100)
}
 else {
  	that.progressState = 'exception'
  	that.fileList = []
  	that.$message.error('导入失败')
  }
    }
)
  .carch(() => {
  	this.$message.error('导入失败')
  })
}
}

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了a-upload的使用，而a-upload提供了大量能使我们快速便捷地处理数据的函数和方法。