el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上：

微信： volley369

业务要求，实现以下效果：

业务要求：

el-upload肯定不能一个个的写，要用json去循环
点击某个el-upload，要定位到array中的某个值，上传图片后，这个值变
要求能拖动，能删除
传到阿里云的OSS上，最后array中的值，变为图片网址
必要要TMD能上传照片，视频，PDF，并且是哪种格式，在json中已定义好

wx 以下代码只展示思路方法，具体的css和业务，还得和自己的工程对上。

布局代码：

<div  v-for="(item,index) in daikuan01.img"><el-uploadclass="avatar-uploader img1567"action=""drag:http-request="OSSUP":show-file-list="fff":before-upload="function (file) { return handleBefore(file, 21,index,item.type)}">//根据自己的son数据判断预览图，是图片/视频/pdf<img v-if="item.value.length>5" :src="getShow(item.type,item.value)" class="avatar"></el-upload>
</div>

下面是函数

1：选择文件时的钩子handleBefore：

这里before-upload的函数中周转了一个参数，直接获取json中index，进而获取需要
1：要传到json中哪个图片上
2：要传图片，还是视频，还是pdf

 handleBefore(file,a,b,c){this.check16Index = b;this.check16Type = a;this.check16PPV=c;if(this.check16PPV=='pic'){const isJPG = file.type === 'image/jpeg';const isJPG2 = file.type === 'image/png';const isLt2M = file.size / 1024 / 1024 < 10;if (!isJPG && !isJPG2) {this.$message.error('只能上传jpg/png');return false;}if (!isLt2M) {this.$message.error('图片大小不能超过10MB!');return false;}return true;}else if(this.check16PPV=='video'){const isVideo = file.type === 'video/mp4';const isLt100M = file.size / 1024 / 1024 < 100;if (!isVideo) {this.$message.error('只能上传mp4');return false;}if (!isLt100M) {this.$message.error('mp4大小不能超过100MB!');return false;}return true;}else if(this.check16PPV=='pdf'){console.log(file.type)const isJPG = file.type === 'application/pdf';const isLt2M = file.size / 1024 / 1024 < 50;if (!isJPG) {this.$message.error('只能上传pdf');return false;}if (!isLt2M) {this.$message.error('大小不能超过50MB!');return false;}return true;}else{this.$message.error('此选项暂无可上传内容，请联系客服解决!');return false;}}}

2：上传到OSS的函数

import {client} from '../../../utils/oss.js';
OSSUP({file}) {var that = this;this.loadingMain = true;var fileName='';//oss传成功后，根据自己定义的标识，判断传的事什么类型，从而给oss生成url加标志if(this.check16PPV=='pic'){fileName = "pics/" + Date.parse(new Date()) + ".jpg";}else if(this.check16PPV=='video'){fileName = "pics/" + Date.parse(new Date()) + ".mp4";}else if(this.check16PPV=='pdf'){fileName = "pics/" + Date.parse(new Date()) + ".pdf";}client.put(fileName, file).then(({res, url, name}) => {this.loadingMain = false;if (res && res.status == 200) {url = 'https://www.xxxxxxxxx.cn/' + name//TODO oss传成功后，根据index去修改json内的值if (that.check16Type == 21) {that.daikuan01.img[that.check16Index].value = url;} else if (that.check16Type == 41) {that.zx_zdr1.img[that.check16Index].value = url;} else if (that.check16Type == 42) {that.zx_po1.img[that.check16Index].value = url;} else if (that.check16Type == 43) {that.zx_dbr1.img[that.check16Index].value = url;} else if (that.check16Type == 61) {that.car1.img[that.check16Index].value = url;}else if(that.check16Type==101){that.bxs.img[that.check16Index].value=url;}//........看自己的业务循环下去} else {console.log(res)that.$message.error('文件上传失败');}}).catch((err) => {that.loadingMain = false;console.log(err)that.$message.error('文件上传失败');});},

3：oss.js


首先去npm oss
然后新建oss.jslet Oss=require('ali-oss')
export let client  = new Oss({region: 'oss-cn-beijing',//节点accessKeyId: 'LTAI4G4W1..........',accessKeySecret: 'Rbxpl48fi9......',bucket: 'artis....'
})

tips:代码能跑，就别轻易重构他，稳定没你事，炸了就找你

el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上相关推荐

获取form表单_【第1535期】前端 Form 的表单的一个通用解决方案
前言今日早读文章由阿里@布达投稿分享. @布达,Alibaba Fusion项目组的.花名潕量.主要专注在设计系统.组件.可视化搭建这个领域正文从这开始-- Fusion Next - Form ...
Gin 框架学习笔记（01）— 自定义结构体绑定表单、绑定URI、自定义log、自定义中间件、路由组、解析查询字符串、上传文件、使用HTTP方法
要实现一个 API 服务器,首先要考虑两个方面:API 风格和媒体类型.Go 语言中常用的 API 风格是 RPC 和 REST,常用的媒体类型是 JSON.XML 和 Protobuf.在 Go A ...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
form表单嵌套,用标签的form属性来解决表单嵌套的问题参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...
查看ie保存的表单_无代码搭建系统（一）——流程表单搭建
迎着2020疫情带来的线上办公.远程协同办公,把无代码带上风口浪尖,众多无代码厂商迅速发展起来,推出自己的无代码产品.实现全民开发,是无代码发展的愿景和目标.数字化和网络化使各行各业的客户对应用开发的 ...
uniapp 表单提交图片跟其他填写数据_记录第一次实现表单数据提交到数据库
经过几周的Web前端学习我初步对.html文件.php文件有了一定的了解.首先我们来复习一下学过的知识.HTML页面实际上就是静态的网页页面,我们可以用html+css(层叠样式表)来创作出具有不同格 ...
添加form表单_Django实战：如何使用djangocrispyforms美化Bootstrap 4表单
这是一个快速教程,可帮助您开始使用django-crispy-forms, 并且永不回头.Django-crispy-forms是一个很棒的第三方包,可让您控制渲染Django表单的方式,而不会破坏默 ...
Antd Vue 表单生成快速开发指南，内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
form表单下的button不设置type会自动提交表单
有时html页面button点击会出现自动提交表单的情况. 后来查资料得知,form表单下的按钮在没有指定type类型的时候,button会有一个默认的type="submit" ...
360 html禁止自动填充,360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决？...
360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决? 很多用户都遇到了360浏览器自动填充表单的问题,那么怎么解决呢?今天带来360浏览器自动填充表单的问题解决方法分享. 开发 ...

el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上

el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上：

业务要求，实现以下效果：

布局代码：

下面是函数

1：选择文件时的钩子handleBefore：

2：上传到OSS的函数

3：oss.js

tips:代码能跑，就别轻易重构他，稳定没你事，炸了就找你

el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上相关推荐

最新文章

热门文章