需求：
1、文件大小验证
2、文件类型验证
3、额外参数传输
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<template> <el-upload class="upload-demo" 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" class="el-upload__tip" style="margin: 0 10px;">只能上传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的上传方法
代码如下（封装的上传方法）
|
1
2
3
4
5
6
7
8
9
10
11
|
export function mpp(data) { return new Promise(function(resolve, reject) { let data = { method: "POST", url:url, data:data } resolve(axios(data)); })}<template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!--导入计划 --><div class="associationPlan"> <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="请选择项目" style="width:100%;" clearable :disabled="isCompany"></el-cascader> </el-form-item> <el-form-item label="计划级别：" prop="level"> <el-select size="small" v-model="dataModel.level" placeholder="请选择：" clearable style="width:100%;"> <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option> </el-select> <span class="warnInfo" 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" style="display:inline-block;vertical-align: top;" 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 class="clickBtn"> <el-button @click="close" size="small">取消</el-button> <el-button @click="commit" size="small" type="primary">保存</el-button> </div></div></template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<script>import { mapState, mapActions } from 'vuex';import { plan,mpp} from "../api/system_interface.js";export default { name: "associationPlan", data() { return { dataModel: { projectId: '', projectArry:[], level:null, name:'', parentId:'0' }, defaultProp: { children: "child", label: "name", value: "id" }, //数据校验 rules: { projectArry: [{ required: true, message: "请选择项目", trigger: "blur" }], name: [{ required: true, message: "请输入计划名称", trigger: "blur" }], level: [{ required: true, message: "请选择计划级别", trigger: "change" }] }, file:false, isCompany:false }; }, computed: { ...mapState([ 'listOrgInfoList', 'planTypeList' ]), }, methods: { ...mapActions([ 'getlistOrgInfoList' ]), update(){ let companyTypes = sessionStorage.getItem("companyType"); this.isCompany = companyTypes == 4?true:false; this.dataModel.projectArry = JSON.parse(sessionStorage.getItem("selectArry")); }, uploadImg (f) { // if(!f){ // this.$message.error("请上传文件!"); // return // } this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1]; let param = new FormData(); //创建form对象 param.append('file',f.file);//通过append向form对象添加数据 param.append('level',this.dataModel.level);//添加form表单中其他数据 param.append('projectId',this.dataModel.projectId);//添加form表单中其他数据 param.append('planName',this.dataModel.name);//添加form表单中其他数据 mpp(param)//上传 .then(response=>{ if(response.code == "200"){ this.$message.success("上传成功!"); this.close(); this.$emit("refreshData"); onSuccess(response.data); } }) .catch(({err}) => { f.onError() }) }, uploadImgSuccess(response, file, fileList) { // 缓存接口调用所需的文件路径 console.log('文件上传成功') // this.$message.success("上传成功!"); }, handleRemove(file, fileList) { // 更新缓存文件 console.log('文件删除') }, //重置方法 reset() { const associationPlan = this.$refs["associationPlan"]; associationPlan.resetFields(); this.dataModel.projectId = null; this.dataModel.name = ''; this.dataModel.level = ''; this.dataModel.projectArry = []; }, //关闭弹框 close() { this.$emit("close"); this.reset(); }, //点击提交 commit() { this.$refs["associationPlan"].validate(valid => { if (!valid) { return; } this.$refs.uploadAdd.submit(); // this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1]; // plan(this.dataModel) // .then(response => { // if (response.code == "200") { // this.$message.success("添加成功!"); // this.close(); // this.$emit("refreshData"); // } else { // this.$message.error(response.msg); // } // }) // .catch(error => { // }); }); }, }}; |
|
1
2
3
4
5
6
7
8
9
10
|
</script><style lang="scss" scoped>.clickBtn { text-align: center;}.warnInfo{ // color: #feba51; color: rgb(64, 158, 255);}</style> |
以上这篇vue+element_ui上传文件,并传递额外参数操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_39572257/article/details/100597003
