vue+element_ui上传文件，并传递额外参数

需求：

文件大小验证
文件类型验证
额外参数传输

<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 = thisfor (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 = thislet 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+element_ui上传文件，并传递额外参数相关推荐

ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
场景需要将Excel中的数据导入到数据库中,就会用到文件上传的功能. 这里使用ElementUI的el-upload控件实现文件上传. 注: 博客: https://blog.csdn.net/ba ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
Upload_上传_并传递额外参数
页面代码 <el-uploadstyle="display: inline-flex":s ...
vue实时上传文件进度条
vue实时上传文件进度条 //上传文件组件 <el-uploadaction:show-file-list="false":before-upload="uploa ...
C# 使用HttpClient上传文件并附带其他参数的步骤
HttpClient和MultipartFormDataContent(传送门)最低适用于.NET Framework 4.5版本发送端代码 using (HttpClient client = n ...
elementUI中el-upload上传文件时附带额外参数传递
公司vue项目中,文件上传这块先前一直使用的单独接口,即只是单纯的上传文件接口,上传完了拿到文件的id之后再调用文件关联绑定关系的接口,上传的代码如下即可:需要上传的url地址以及hearders中 ...
vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
vue前端上传文件给后端的两种方式
<a-uploadv-model:file-list="fileList":show-upload-list="false":multiple=" ...
C# HttpClient上传文件并附带其它参数
1.Fiddler抓包参数详情 Content-Type: multipart/form-data; boundary="8d9ade1fd906a6a" Content-Leng ...
FormData上传文件同时附带其他参数
前端js代码: function fileSubmit() {var formData = new FormData();formData.append("file",$(&quo ...

vue+element_ui上传文件，并传递额外参数

vue+element_ui上传文件，并传递额外参数相关推荐

最新文章

热门文章