element的中手动上传Upload文件做法，文件上传时转换成base64格式

手动上传主要是配置参数 :auto-upload=“false” 的使用 设置true则代表自动上传（即选择文件就开始上传服务器）
其他配置如下

<el-upload class="upload-demo"
  //ref="upload"	// this.$refs.upload.submit(); 这是提交使用
  accept="application/pdf,image/png,image/jpeg,image/jpg,"	//允许上传的格式
  action="https://xxxx.com/posts/"	//这里为连接服务器的地址
  multiple		//是否支持多选文件
  :limit="3"	//最大允许上传个数
  :file-list="fileListData"		//上传的文件列表
  :on-exceed="handleExceed"		//文件超出个数限制时的钩子
  :on-change="handleChange"		//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
  :on-remove="handleRemove"		//文件列表移除文件时的钩子
  :auto-upload="false"		//是否在选取文件后立即进行上传
  //:before-upload="beforeUpload"	//上传文件之前的钩子(这里用来控制文件大小、格式等，手动上传在on-change中控制)
  //:data={id:formDta.id}		//自动上传时附带的额外参数（手动上传可以在axiso中单独写）
  >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
//定义数据信息
data(){
	return{
		id:'xxxx',//参数id
		fileListData:[],//上传文件列表
	}
}
//方法函数如下
methods:{
	//上传文件前进行文件格式、大小的校验
	beforeUpload(file,fileList){
		let fileTypeList = ["pdf","png","jpeg","jpg"]	//可以上传的文件后缀名
		let fileType = file.name.substring(file.name.lastIndexOf(".") + 1)//获取上传文件的后缀名
		const isType = (fileTypeList.indexOf(fileType ) === -1)//判断类型是否符合
		const isLtXM = file.size / 1024 / 1024 < 10 //上传文件小于10MB
		if(isType){
			this.$message.error('只能上传pdf，png，jpeg，jpg格式文件')
			//fileList.pop()//删除不符合的文件  这两个方法随便选择一个都行
			fileList.splice(fileList.indexOf(file),1)//删除不符合的文件
			return false；
		}else if(!isLtXM ){
			this.$message.error('文件大小不能超过10MB')
			fileList.splice(fileList.indexOf(file),1)//删除不符合的文件
			return false；
		}
	},
	//文件超出个数限制的钩子
	handleExceed(files,fileList){
		this.$message.warning(`当前限制上传3个文件，本次选择了${files.length}个文件，共选择了${files.length + fileList.length}个文件`)
	},
	//上传文件事件
	handleChange(file,fileList){
		if(file.status != 'ready'){return false;}//文件准备好后再执行 解决两次调用的问题
		this.beforeUpload(file,fileList)//进行文件校验  （自动上传配合 before-upload 使用，）手动上传需要单独校验
		fileList.forEach(item=>{//循环数组进行base64转换
			//调用base64方法进行数据的转换(方法在下面定义)
			this.getBase64(item.raw).then(res=>{
				item.url= res	//在原数组中每个数据添加属性url和转换后的base64编码值（这里我放在原字段中方便删除文件列表使用,也可以自定义数组存放根据个人喜好）
			})
		})
		//转换base64是异步方式需要一些时间  这里赋值建议延迟一下
		setTimeout(()=>{
			this.fileListData = fileList
		},1000)
	},
	//base64编码转换方法
	getBase64(file){
		return new Promise((resolve,reject)=>{
			let reader = new FileReader()	//定义方法读取文件
			reader.readAsDataURL(file)	//开始读文件  本身是图片的二进制数据 进行base64加密形成字符串
			reader.onload = ()=> resolve(reader.result)//成功返回对应的值 reader.result可以直接放在img标签中使用
			reader.onerror = ()=> reject(error)//失败返回失败信息
		})
	},
	//文件列表移除文件时钩子
	handleRemove(file，fileList){
		this.fileListData = fileList
		//或者使用下面方法
		//this.fileListData.splice(this.fileListData.indexOf(file),1)//删除不符合的文件
	},
	//提交方法
	submitUpload(){
		let base64FileList = []
		this.fileListData.forEach(file=>{
			base64FileList.push(file.url)
		})
		//第一种ref提交 数据在:data={id:formDta.id,files:base64FileList}配置
		this.$refs.upload.submit();
		//第二种：axios 自定义提交
		this.$axios('https://xxxx.com/posts/','POST',{
			id:this.id,
			files:base64FileList //这里base64FileList 为后台需要的参数[1,2]形式 根据自己需要修改
		}).then(res=>{
			console.log(res,'请求返回信息')
			this.$message.success('文件添加成功了')
		})
	},
	
}

如果不想使用base64格式提交 还可以使用FormData() 方法数据信息提交 只需要在提交代码时进行数据序列化就行

	//上传文件事件
	handleChange(file,fileList){
		if(file.status != 'ready'){return false;}
		this.beforeUpload(file,fileList)
		this.fileListData = fileList
	},
	//提交方法中进行转换
	submitUpload(){
		//创建新的数据对象
		let newFormData = new FormData()
		let fileName = []//存储文件名字
		this.fileListData.forEach(file=>{
			newFormData.append('file',file.raw)
			fileName.push(file.name)
		})
		newFormData.append('fileName',fileName)
		cosole.log(newFormData.getAll('file'))//查看文件信息
		//提交数据
		this.$axios('https://xxxx.com/posts/','POST',{
			id:this.id,
			files:newFormData
		}).then(res=>{
			console.log(res,'请求返回信息')
			this.$message.success('文件添加成功了')
		})
	},