vue文件上传（单文件以及多文件）

使用vue就有很多UI组件，我用的是element。但是element和其他的组件都是图片单次上传，而且比较麻烦，样式和方法写起来都太乱了，基本上上传文件还是自己写的最舒服。文件分为单文件和多文件上传

1 单文件

我用的是Element,所以我会借用element的样式和其他表单或者输入框统一。

这里是的上传input输入框，我用绝对定位将其放在后面的input 显示框的上面，后面的正常在文档流中，显示正常，又将绝对定位的上传框opacity设为0，这下只能显示后面的输入框，但点击输入框的时候上传框在因为绝对定位在其上面，所以会点击到上传框从而达到上传文件的效果

单文件表单

每次上传图片会触发上传框的change事件，我们获取到输入框的文件，然后获取其name，将其name赋值给filename，上面的输入框绑定了filename的值，所以会显示上传图片的文件名，这样每次上传文件，文件名都会是新上传图片的名称。

js处理图片

有上传文件的接口一般是form表单的参数格式，等到提交表单的时候可以用 FormData对象去append各个参数就可以了。

2 多文件上传

多文件和上面文件思路差不多，但是有一点是不同的，既然多文件，可以连续删掉多个，一次添加多个，或者多次添加一个，这就不能讲文件名在输入框里显示了。

多文件表单

我们可以将上传框和单文件上传一样，设置绝对定位在上传按钮或者输入框的上面，上传框设置multiple属性，可一次上传多个，

批次添加文件

我们将文件名和文件调价到不通数组，文件名数组fileList在模板里用v-for遍历，每次上传都可以看到下面新增的文件名，参考多文件保单图，如有需要删除，我们将要将其图片在文件名数组中的index值传入删减函数，删除对应文件名，然后将其在文件数组中的同index文件删除，这样就可以实现不断加不断删的功能。不过，每次删除之前都要讲输入框的value值清空，这样删除之后还可以上传之前删除的文件。最后还是用FormData对象添加参数。

删除文件

结束了，地址：https://dwz.cn/fgXtRtnu

vue文件上传（单文件以及多文件）相关推荐

大文件上传服务器、支持超大文件HTTP断点续传实践总结
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/ababab12345/ article/details/80490621 最近由于笔者所在的研发集团产品需要,需要支持高性能的 ...
大文件上传服务器：支持超大文件HTTP断点续传的实现办法
点击上方蓝色"方志朋",选择"设为星标"回复"666"获取独家整理的学习资料! 来源:blog.csdn.net/ababab12345/a ...
将文件上传至ftp服务器，FTP文件上传工具类，将文件上传至服务器指定目录
将文件上传至ftp服务器,传入File对象,将文件上传至ftp服务器需要配置修改的点: 1. 服务器ip端口(服务器ip 端口22/21). 2. 服务器账号密码(服务器登录用户名密码). 3. 上 ...
【FTP】java FTPClient 文件上传内容为空，文件大小为0
问题:如题所述,使用FTPClient上传至FTP服务器, 表现如下:①文件大小为0 ②上传很小的文件,但是要花费很长的时间,20K要花费2分钟甚至更久 ③没有任何的报错,没有任何的乱码解决方法: ...
php上传文件自动删除,jsp-解决文件上传后重启Tomcat时文件自动删除问题
吼吼,我遇到的问题是这样的...... 我写了一个图片上传的方法,上传时,判断没有这个目录就自动建立一个.然后开始上传图片,能成功,能在服务器找到文件夹和相应的文件.但是,重启项目,或者清理缓存之后, ...
Qt之QFtp 在客户端实现文件上传、下载、新建文件夹、重命名、删除和刷新等功能
简述本来是打算用新的类QNetworkAccessManager实现的客户端的文件上传.下载.新建文件夹.重命名.删除和刷新等功能,但是QNetworkAccessManager没有提供原本在QFt ...
解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题
解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题问题描述 java程序,使用阿里云oss文件上传服务,在测试时偶然发现,我用苹果手机开启高清进行摄像,将原图通过qq传到电脑上,在电 ...
java实现MinIO文件上传，并将视频文件截图，将视频封面及视频通过MinIo上传到服务器中
java实现MinIO文件上传,并将视频文件截图,将视频封面及视频通过MinIo上传到服务器中配置完毕,接下来开始代码编写. 说明总过程分为两步. 1.配置MinIO的环境. 2.代码编写. 下面 ...
Struts2之文件上传(单文件/多文件)
<一>简述: Struts2的文件上传其实也是通过拦截器来实现的,只是该拦截器定义为默认拦截器了,所以不用自己去手工配置,<interceptor name="fileUp ...
SpringMVC的请求-文件上传-单文件上传的代码实现2
完成文件上传 @RequestMapping(value="/quick22") @ResponseBody public void save22(String username, ...

vue文件上传（单文件以及多文件）

vue文件上传（单文件以及多文件）相关推荐

最新文章

热门文章