Element-UI 多个el-upload组件自定义上传不用上传url并且携带自定义传参(文件序号)
1. 需求: 有多个(不确定具体数量)的upload组件,每个都需要单独上传获取文件(JS File类型),不需要action上传到指定url,自定义上传动作和http操作。而且因为不确定组件数量,所以每次也需要获取是第几个文件(索引),所以也需要实现附加索引这个参数
2. 实现:如下
<el-col v-bind="grid2" v-for="(item, index) in list" :key="index"> # list 不知道一共有几个列表项 <el-form-item required :label="item.value" prop="randomAmount"> <el-upload class="upload-demo" action="none" #这里随便写 :http-request="handleFileUpload" #这里会覆盖原本的上传http的操作,从而实现自定义。 :limit="1" :on-remove="(file, fileList)=> {return onRemove(file, fileList, index)}" #这里的index是自定义索引参数,这种写法能够携带自己的参数 :on-change="(file, fileList)=> {return onChange(file, fileList, index)}"> <el-button round>点击上传</el-button> </el-upload> </el-form-item> </el-col> <el-col :span="24"> <el-button type="primary" @click="submitForm">确认提交</el-button> </el-col> <script> export default { data() { return { // 暂存个el-upload的File fileUploaded: { 1: null, 2: null, 3: null, 4: null, 5: null // 可以多写几个(确定最多不会上传超过某数量的文件) }, list:[ // 根据这个列表,渲染相应数量的el-upload组件 { key: "1", value: "个体工商户/企业营业执照照片" }, { key: "2", value: "政府机关/事业单位/社会组织登记证书照片" }, // list 不知道一共有几个列表项,这部分是通过后端请求获取的 ] } }, methods: { // 覆盖默认的http行为 handleFileUpload(options, index){ }, // 文件操作删除 onRemove(file, fileList, index){ this.fileUploaded[index] = null }, // 文件上传 onChange(file, fileList, index) { // 判断上传的文件是否是满足格式要求(自定义) if(!file.name.includes('.zip')) { fileList.pop() # 清除上传文件后展示出来的文件图标 return this.$message.error("请上传zip压缩包!") } // 判断上传的文件是否超过大小限制(自定义) if (file.size >= 5*1024*1024){ // 5mb fileList.pop() return this.$message.error("大小不能超过5MB!") } // 判断上传的文件的状态(一般不会出错) if(file.status != 'ready'){ fileList.pop() return this.$message.error("状态错误") } // 暂存文件 this.fileUploaded[index] = file.raw }, // 表单上传,先判断文件是否按要求上传了,满足要求的话,构造formData submitForm(){ let formdata = new FormData() for (let i = 0; i < this.list.length; i++) { // 如果有文件未上传,则报错。确保每个el-upload都上传了文件 if (!this.fileUploaded[i]){ return this.$message.error('请上传'+this.list[i].value) } formdata.append('subMerCertFiles', this.fileUploaded[i]) // 多个文件上传 } // 后面调用接口,上传formdata } } } </script>
演示
到此这篇关于Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)的文章就介绍到这了,更多相关Element-UI 多个el-upload组件自定义上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
elementui[el-table]toggleRowSelection默认多选事件无法选中问题
这篇文章主要介绍了elementui[el-table]toggleRowSelection默认多选事件无法选中问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11Vue3导入Elementplus时组件无法加载的情况及解决
这篇文章主要介绍了Vue3导入Elementplus时组件无法加载的情况及解决方案,具有很好的参考价值,希望对大家有所帮助2024-03-03Vue.js使用this.$confirm换行显示提示信息实例
在编写Web应用时,实现多行文本显示通常需要用到HTML标签或JavaScript特定函数,本文介绍了如何使用JavaScript的$createElement函数来创建多行文本显示,$createElement可以创建任何HTML标签,使得在JavaScript中控制HTML输出更加灵活,通过简单的代码示例2024-10-10解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09分析 Vue 中的 computed 和 watch 的区别
这篇文章分析 Vue 的 computed 和 watch 的区别,computed 用来监控自己定义的变量,页面上可直接使用。watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据,需要的朋友可以参考一下2021-09-09
最新评论