element vue 实现文件上传

element vue实现文件上传

文件上传方法封装

import _http from "@/js/https";//引入封装的拦截器
/**
* @param {String} url 上传文件接口
* @param {String} method 方法 get||post
* @param {Array} fileList 需要上传的文件列表 filelist
* @param {Object} params 后台需要的别的参数 {}
* @param {Function} callback 成功的回调函数
* @param {Function} errorBack 失败的回调函数
*/
uploadMultipeFile(url,method,fileList,params,callback,errorBack){
	let fileData= new FormData()
	for(let i=0;i<fileList.length;i++){
		fileData.append("file",fileList[i].raw)
	}
	for(let key in params){
		if(params.hasOwnProperty(key)){
			fileData.append(key,params[key])
		}
	}
	_http({
		url,
		method,
		data:fileData,
		contentType:false,
		dataType:"json"
	})
	.then(res=>{
		callback&&callback(res)
	})
	.catch(err=>{
		console.log(err)
		errorBack&&errorBack(err)
	})
}

方法调用

<el-upload
  class="upload-demo"
  :action="uploadUrl"
  :on-change="handleChange"
  multiple
  :file-list="fileList"
  :show-file-list="false"
  :auto-upload="false"
>
  <el-button size="small" type="primary">添加文件</el-button>
</el-upload>
<el-button size="small" type="primary" @click="handleUpload">点击上传</el-button>

<script>
import {uploadMultipeFile} from "@/js/utils.js"//引入uploadMultipeFile方法
export default {
	data:{
		fileList:[],
		uploadUrl:"",
	},
	methods:{
		// 点击添加文件给filelist赋值
		handleChange(file,fileList){
			this.fileList=fileList
		},
		//上传
		handleUpload(){
			let fileList=this.fileList;
			uploadMultipeFile({
				"",//后台接口
				"",//请求方式
				fileList,//存储上传的文件信息
				{},//后台需要的别的字段
				(res)=>{//成功的回调函数
					console.log(res)
					//接口成功后需要做的事情
				},
				(err)=>{//失败的回调函数
					//接口调用失败后需要做的事情
				}
			})
		}
	}
}
</script>