1、文件大小验证
2、文件类型验证
3、额外参数传输
<template> <el-upload action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="formHandleRemove" :before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"> <el-button type="primary">上传文件</el-button> <span slot="tip">只能上传xlsx/xls/csv文件，且不超过{{formMaxSize}}M</span> </el-upload> </template> <script> export default { data () { return { formMaxSize: 10, // 上传文件大小 formFileList: [], // 显示上传文件 uploadFormFileList: [] // 确定上传文件 } }, methods: { // 开始上传前验证 beforeUploadForm (file) { // 验证文件大小 if (file.size / 1024 / 1024 > this.formMaxSize) { this.$message({ message: `上传文件大小不能超过${this.formMaxSize}M!`, type: 'warning' }) return false } // 中文乱码处理 if (file.raw) { let reader = new FileReader() // 读取文件内容 reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题，不加reader.onload方法都不会触发 reader.onload = function (e) { this.contentHtml = e.target.result // txt文本内容，接下来就可以对其进行校验处理了 } } // 验证文件类型 var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv' if (!extension) { this.$message({ message: '上传文件只能是xlsx/xls/csv格式!', type: 'warning' }) } return extension }, // 移除上传列表中文件 formHandleRemove (file, formFileList) { let thiz = this for (let i = 0; i < thiz.uploadFormFileList.length; i++) { if (thiz.uploadFormFileList[i].pname === file.name) { thiz.uploadFormFileList.splice(i, 1) break } } }, // 允许上传文件个数验证 formHandleExceed (files, formFileList) { this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + formFileList.length} 个文件`) }, // 上传文件 handleUploadForm (param) { let thiz = this let formData = new FormData() formData.append('uid', '上传文件编号') // 额外参数 formData.append('files', param.file) let loading = thiz.$loading({ lock: true, text: '上传中，请稍候...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) thiz.$axios.post('http://localhost:8080/upload/file', formData).then(({data}) => { if (data.statusCode === 233) { thiz.$message('上传文件成功，' + data.message) thiz.formFileList = [] thiz.uploadFormFileList = [] } else { thiz.formFileList = [] thiz.uploadFormFileList = [] thiz.$message('上传文件失败，' + data.message) } loading.close() }) } } } </script> <style lang="scss" scoped> </style>
总结：
关于el-upload中各属性的配置，可以看element_ui官网
后端接受上传文件和额外参数：
@RequestParam(value = "uid") String uid, @RequestParam(value = "files") MultipartFile[] files
补充知识：vue利用elementUI上传文件以及其他参数的处理方式
将文件自动上传改为false
:auto-upload="false"
点击保存的时候，调用el-upload的上传方法
代码如下（封装的上传方法）
export function mpp(data) { return new Promise(function(resolve, reject) { let data = { method: "POST", url:url, data:data } resolve(axios(data)); }) } <template>
<!--导入计划 --> <div> <el-form :model="dataModel" :rules="rules" ref="associationPlan" label-width="100px"> <el-form-item label="项目名称：" prop="projectArry"> <el-cascader :options="listOrgInfoList" v-model="dataModel.projectArry" :props="defaultProp" size="small" placeholder="请选择项目" clearable :disabled="isCompany"></el-cascader> </el-form-item> <el-form-item label="计划级别：" prop="level"> <el-select size="small" v-model="dataModel.level" placeholder="请选择：" clearable> <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option> </el-select> <span v-if="dataModel.level==1">一级进度计划匹配项目总工期，项目下只可建立一个，请确认后再添加！</span> </el-form-item> <el-form-item label="计划名称：" prop="name"> <el-input v-model.number="dataModel.name" size="small"></el-input> </el-form-item> <el-form-item label="导入计划："> <el-upload accept=".mpp" ref="uploadAdd" action="" :auto-upload="false" :http-request="uploadImg" :on-success="uploadImgSuccess" :on-remove="handleRemove"> <el-button size="small" type="success">请选择文件</el-button> </el-upload> </el-form-item> </el-form> <div> <el-button @click="close" size="small">取消</el-button> <el-button @click="commit" size="small" type="primary">保存</el-button> </div> </div> </template>