vue+element_ui上传文件,并传递额外参数操作
作者：guan-qing
这篇文章主要介绍了vue+element_ui上传文件,并传递额外参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需求：
1、文件大小验证
2、文件类型验证
3、额外参数传输
<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的上传方法
代码如下（封装的上传方法）
export function mpp(data) {
return new Promise(function(resolve, reject) {
let data = {
method: "POST",
url:url,
data:data
}
resolve(axios(data));
})
}
<template>
<!--导入计划 -->
<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>
<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 => {
// });
});
},
}
};
</script>
<style lang="scss" scoped>
.clickBtn {
text-align: center;
}
.warnInfo{
// color: #feba51;
color: rgb(64, 158, 255);
}
</style>
以上这篇vue+element_ui上传文件,并传递额外参数操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。