upload导入导出

Posted 2022-12-05 辣可乐少加冰

系列文章目录

---

`提示：文件导入|导出

文章目录

• 系列文章目录
• 前言
• 一、a-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 / 1024M类型的附件`)
      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提供了大量能使我们快速便捷地处理数据的函数和方法。