vue之element-ui文件上传「建议收藏」

vue之element-ui文件上传「建议收藏」文件上传需求  对于文件上传,实际项目中我们的需求一般分两种:对于单个的文件上传,比如拖动上传个图片之类的,或者是文件。 和表单一起实现上传(这种情况一般都是文件上传之后,后端返回保存在服务器的文件名,最后和我们的表单一起上传)对于第一种情况,通过看api就很明了。http://element-cn.eleme.io/#/zh-CN/component/upload对于第二…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文件上传需求

    对于文件上传,实际项目中我们的需求一般分两种:

  1. 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件。
  2. 和表单一起实现上传(这种情况一般都是文件上传之后,后端返回保存在服务器的文件名,最后和我们的表单一起上传)

对于第一种情况,通过看api就很明了。

http://element-cn.eleme.io/#/zh-CN/component/upload

对于第二种情况,我们需要考虑一个问题就是手动异步上传,后面会具体说明一下,您耐心往下看…

识别几种文件上传格式

在上传文件之前,我们需要了解我们前端在请求数据的时候,几种格式的区别。因为前后的格式不统一,就会导致我们的上传失败,毕竟踩坑了,真的难过

1.application/x-www-form-urlencoded

最常见的post提交编码格式,一般的表单提交默认以此方式,具体的请求格式看下面:

vue之element-ui文件上传「建议收藏」

vue之element-ui文件上传「建议收藏」

2.multipart/form-data

这个比较常见的post提交方式,我们通常是在文件上传的时候使用。形式特别好认,一长串的字符…

vue之element-ui文件上传「建议收藏」

3.application/json

使用vue现在我们用的服务都是axios,(vue-resource论坛里不更新了),axios默认的提交就是用的这种方式

json就不截图了,只要是我们一般的请求,都基本是json格式,肯定早就清楚了。

具体的MIME详情参见 MIME types

element-ui封装upload上传

通过element-ui的api很容易的就知道文件上传,按照示例来,不要偷懒,慢慢看,毕竟自己不知道已经看了多少遍了。然后当你能够上传成功的时候,看下面图:

vue之element-ui文件上传「建议收藏」

已经成功上传了,那么这些东西就很简单了。

配置一下header

vue之element-ui文件上传「建议收藏」

我们这里使用的就是application/x-www-form-urlencoded编码格式来上传form表单数据,通过上面的解释,我们上传的文件编码格式就是multipart/form-data (这个格式的请求太好认, 一长串有没有,里面包括了文件名…)就是我们实现文件的上传。当你能够获取到后端返回的文件名,并且以表单的格式提交数据,以为要成功的时候发现,too young too simple。仍然提交失败,后端数据没获取对

vue之element-ui文件上传「建议收藏」

那么怎么办,最后是使用qs.stringfy()格式化数据,也就是提交的数据要经过转化: qs.stringfy(data), 成功post到服务器(兴奋好久…)

vue之element-ui文件上传「建议收藏」

两者的数据格式还是有区别的…

手动上传(文件上传成功才提交表单数据)

    之前一直纠结的就是,怎么去实现比如我点击提交,那么让用户觉得,哦,我这才把文件和表单内容成功提交。考虑到,文件不能选择就提交到服务器。那么就用:auto-upload=”false”干掉自动上传文件,因为默认是自动上传的(看api哈)。然后就是关键的了,我点击提交执行方法使用axios提交数据到服务器,那么同时也要提交文件,但是前提是我的表单数据比如等到文件都提交成功,然后返回服务器保存的文件名,那么才能正确的去提交表单数据。怎么实现异步呢?搜索了很多文章,最后自己采用了element-ui封装的on-success方法,想想我们使用submit提交文件,成功了是不是要执行对应的on-success方法?

那么正好,思路就是:点击提交,那么我们执行一个方法,这个方法里面就包含一个文件的提交,那么在这个文件提交成功的函数里面,我们可以对返回值执行一些操作,最后还有文件继续在当前的成功函数里面执行提交,依次往下,对于最后一个,那么这时候我们就可以提交表单数据了,我们该获取的都获取了,这时候所有的文件都已经提交完成了。(看图说话)

1、点击提交执行

vue之element-ui文件上传「建议收藏」

2、uploadscan上传成功后肯定会执行成功函数:

vue之element-ui文件上传「建议收藏」

好的这里看到了,有一个uploadattachment的提交(因为项目中有两个文件上传)

vue之element-ui文件上传「建议收藏」

3、最后uploadattachment上传成功后:

vue之element-ui文件上传「建议收藏」

具体的参数应该都能看得懂的(聪明的你们…)

这样的话,我们就能够实现,手动异步上传了。

文件上传中,我们还会遇到accept,也就是可以接受的文件类型。一个在线工具分享一下 在线工具,里面好包括转义字符等等

总结:

1、文件上传注意编码格式,前后端沟通好,比如这次的项目中,用的就是application/x-www-form-urlencoded格式

2、手动上传,切入点就是element-ui自己封装的on-success文件

最后,这是项目中遇到为问题,一步步的解决,可能和大家想实现的某些效果有些差距,但是文件上传主要和后端要沟通好是什么样的请求。请多多指教。(后面总结就是,任何问题,只要自己弄出来了,兴奋是一回事,是自己会觉得其实并没有想象中那么难,当然过程一般都挺艰难。毕竟对于自己太容易也没啥好兴奋的)

最后,我们也可以通过http-serve自定义文件上传。这时候就需要用到new FormData对象。官方链接 FromData对象的使用 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170643.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • android 平板重装系统,平板电脑系统重装方法「建议收藏」

    不少用户想要平板电脑重装,但是不知如何操作,为此有些为难。平板电脑是跟笔记本电脑方便携带出现的物品,不会意味着台式机电脑会退出电脑界,2020年新的开始新的一年,让许多的电脑品牌竞争激烈起来。平板电脑也叫便携式电脑,是一款以触摸屏作为基本的输入设备,无须翻盖、没有键盘、小到放入女士手袋,但是却功能完整的PC。可是满不满足可以重装系统的条件,下面小编整理了平板装系统的方法。1、系统重装支持ARIM构…

  • 深入理解机器学习中的:目标函数,损失函数和代价函数「建议收藏」

    深入理解机器学习中的:目标函数,损失函数和代价函数「建议收藏」参考知乎回答整理:https://www.zhihu.com/question/52398145主要参考:https://www.zhihu.com/question/52398145/answer/209358209基本概念:损失函数:计算的是一个样本的误差代价函数:是整个训练集上所有样本误差的平均目标函数:代价函数+正则化项实际应用:损失函数和代价函数是同一个东

  • linux 文本编辑器vi常用命令

    linux 文本编辑器vi常用命令linux之文本编辑器vi常用命令由于经常在linux下面文本操作,所以这里稍微系统的总结一下自己常用的vi命令1、打开命令:vi+filename(还有各种打开的姿势,只不过我比较顺手这个)2、退出命令::q退出而且不保存修改的内容:q!强制退出不保存修改的内容:wq退出并且保存修改的内容:wq!强制保存修改的内容然后退出(修改了只读文件会用到)ZZ退出并且保存修改的内容,相当于:wq,看个人习惯3、光标移动命令个人比较喜欢上下左右方向键,字母h(左),j

  • Windows 10配置远程开机[通俗易懂]

    Windows 10配置远程开机[通俗易懂]简介最近有个需求,在外边或者是上班的时候想从家里的电脑拿点资料,虽然家里的路由器有公网IP地址,但是电脑总不能一直开着吧,然后就想到可以远程通过网卡唤醒电脑。前提条件拥有一个公网IP(一般可以找运营商申请),如果拥有的公网IP是动态的话,需要绑定DDNS域名,DDNS域名可以自行注册。 电脑主板支持网络唤醒功能。配置方法主板开启网络唤醒功能,如图:设置网络适配器支持唤醒…

  • 测试用例编写_根据接口文档生成测试用例

    测试用例编写_根据接口文档生成测试用例前言写用例之前,我们应该熟悉API的详细信息。建议使用抓包工具Charles或AnyProxy进行抓包。har2case我们先来了解一下另一个项目har2case他的工作原理就是将当前主流的抓

  • smalldatetime和datetime的差别

    smalldatetime和datetime的差别碰上了这件事,才学到教训,一直以为smalldatetime和datetime的差别只是在于时间范围:smalldatetime的有效时间范围1900/1/1~2079/6/6datetime的有效时间范围1753/1/1~9999/12/31所以我判断如果该值不用到太远的日期范围,就会使用smalldatetime。但我忽略了更关键的差别,那就是smalldatetime只精准到分,而datet…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号