使用vue的upload上传文件传入其他参数
前端界面引入依赖,自取所需
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/json.js"></script>
<!-- 引入组件库 -->
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/plugins/elementui/index.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/axios-0.18.0.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/elementui/index.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
使用的是elementui 可参考官方文档
https://element.eleme.io/#/zh-CN/component/upload
<el-upload action="/updownfile/upload.action"
name="excelFile"
:data="getusername"
:show-file-list="false"
:auto-upload="autoUpload"
:before-upload="beforeAvatarUpload"
:on-success="handleSuccess"
>
<el-button type="primary">上传文件</el-button>
</el-upload>
加一个data属性,在下面data中声明
在这里插入代码片
<script>
new Vue({
el: '#app',
data: {
autoUpload: true,//自动上传
getusername:{
参数名:"参数值"
}
},
created: function () {//在vue初始化时调用
},
methods: {
//下载模板文件,../父目录
downloadTemplate() {
window.location.href = "/template/ordersetting_template.xlsx";
},
//上传成功提示
handleSuccess(response, file) {
/* if (response.flag) {
this.$message({
message: response.message,
type: 'success'
});
} else {
this.$message.error(response.message);
}*/
alert(response.errorMsg)
},
//上传文件之前执行
beforeAvatarUpload(file) {
const isXLS = file.type === 'application/vnd.ms-excel';
if (isXLS) {
return true;
}
const isXLSX = file.type ===
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (isXLSX) {
return true;
}
this.$message.error('上传文件只能是xls或者xlsx格式!');
return false;
}
}
})
</script>