自定义elementui上传文件以及携带参数问题
自定义elementui上传文件以及携带参数
elementui提供了上传文件的ui,可以比较方便,我们需要它来完成自定义上传文件以及携带参数需要改写其中的一些方法来实现。
下面是一个简单的上传标签
<el-upload ref="upload" style="display: inline" drag action="" :before-upload="beforeUploadHandle" :http-request="handleUploadForm" :auto-upload="false" multiple :limit="1" :on-exceed="handleExceed"> <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link> </el-upload>
不自动上传
:auto-upload=“false”
- 限制上传文件个数
:limit=“1”
- 上传之前的校验
我们需要实现这个方法,来检测上传的合法性
:before-upload=“beforeUploadHandle”
- 上传时需要携带参数
需要上传的数据文件以及参数在这里来处理添加
:http-request=“handleUploadForm”
- 检测添加文件是否超过限制
:on-exceed=“handleExceed”
手动上传
其中的upload对应于上面的ref=“upload”,我们只需要给按钮实现一个方法执行此语句便可以实现自己点击上传
this.$refs.upload.submit();
具体实现
上传限制以及上传之前的校验不赘述,这里给出一个简单的demo。
上传限制实现类似,只是给出一些提示信息,file便是我们上传的文件。
beforeUploadHandle(file) { if ( file.type !== "image/png" && file.type !== "image/jpeg" ) { this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件!"); return false; } },
携带参数
handleUploadForm(param) { console.log(this.pid) let thisInfo = this let formData = new FormData() // 在formData中加入我们需要的参数 formData.append('file', param.file) formData.append('id', this.pid) // 向后端发送数据 thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => { if (res.status === 200) { thisInfo.$message.success('修改信息成功') } else { thisInfo.$message.success('修改信息失败') } thisInfo.formFileList = [] thisInfo.uploadFormFileList = [] }) }
element-ui上传文件携带参数到后台接收
前端
数据
后台
注意这里要对应,接收的不是mydata,而是具体的值
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
在Vue中使用this.$store或者是$route一直报错的解决
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)
这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容,需要的朋友可以参考下2022-12-12Vue v-for中的 input 或 select的值发生改变时触发事件操作
这篇文章主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08vue2.0$nextTick监听数据渲染完成之后的回调函数方法
今天小编就为大家分享一篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论