13 使用Vue + FormData + axios实现图片上传功能实战

已于 2023-07-25 11:14:58 修改
阅读量1.4w 收藏 127
点赞数 148
分类专栏： Vue + SpringBoot前后端分离项目实战 文章标签： vue.js 前端 javascript axios 图片上传 springboot
于 2023-06-21 00:58:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingyu_qie/article/details/131317611
版权

63748e72dc314943857316f3b1f6a386.gif#pic_center

前言

上节回顾

上一小节中，我们添加了Vue-router的路有数据，这些数据都将是后续实战课程中的真实路由数据了。同时引入了ElementUI的el-menu做为左侧菜单的组件，但本专栏的特点就是遇到第三方功能和组件，自己尽量也要实现一遍，所以，在文章末尾又自己实现了一个tg-menu的组件。如果还不是很明白上下文的同学，可以回过头去看上一节的内容：使用Vue+Vue-router+el-menu实现菜单功能实战

本节介绍

本小节已经是专栏的第11篇博客了，这一节本来是准备开始做图书信息上传的，但考虑到图书信息上传中，有个图片上传的功能点，需要单独抽出一节来说。所以，这一节我们主要是围绕着Vue项目中，通过FormData + axios来实现单个图片上传的功能。

<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
经海路大白狗
关注
  • 148
    点赞
  • 踩
  • 127
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 190
    评论
专栏目录
订阅专栏
FormData 上传图片 vue
zhaofeiweb的博客
03-15 1112
uploadPhoto(event){ var $file = event.currentTarget; var file = $file.files; let totallen = this.fileList.length+file.length if(totallen>4){ this.$toast('最多上传4张图片！') return false } for (var i = 0; i.
vue之axios实现上传图片功能
weixin_58449427的博客
08-26 1392
然后，将二进制流数据转换成 URL 对象并创建一个 a 标签，设置其 href 属性为 URL 对象，并设置 download 属性为我们想要下载的文件名，最后模拟点击 a 标签来下载文件。需要注意的是，在前端下载文件时，由于浏览器的安全控制等原因，有些时候会出现下载失败的情况，这时可以尝试在后端返回数据时设置文件下载的头部信息来解决问题。以上示例中，我们通过点击按钮的方式触发下载图片的操作。在浏览器中，下载文件一般是通过创建 a 标签的方式实现的，而 axios 并没有提供直接下载文件的功能。
vue上传图片
lijiajun98的博客
04-13 207
【代码】vue上传图片。
vue-用formData实现单张图片上传
zhaoyan_love的博客
07-27 2765
vue-用formData实现单张图片上传 上传文件为什么要用formData 1.使用application/x-www-form-urlencoded：此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。 2.使用FormData的最大优点就是可以异步上传二进制文件 实现效果 至于这里为什么有两个接口，解释一下：
axios请求的使用---上传图片
最新发布
jp2221982388的博客
03-12 917
Ajax请求，axios请求，图片请求，图片上传，前端基础，学习框架前提基础
vue+element-ui+axios实现图片上传
10-16
在本文中，我们将深入探讨如何使用Vue.js框架结合Element-UI组件库和axios库来实现一个图片上传功能。Vue.js是一个轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化的能力，使得开发更加高效。Element...
vue+axios+el-upload实现文件上传（带参数）：
01-03
本次使用http-request自定义文件上传： 上传头像 备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media ...
vue实现axios图片上传功能
10-16
在Vue项目中，使用axios实现图片上传功能是一个常见的需求。Vue和axios的结合可以方便地处理前后端数据交互，特别是涉及到文件上传时。本篇文章将详细介绍如何在Vue中利用axios和FormData来完成图片上传功能。 首先...
基于vue+axios+lrz.js微信端图片压缩上传方法
12-02
微信端项目是基于Vux + Axios构建的，关于图片上传的业务场景有以下几点需求: 1、单张图片上传(如个人头像,实名认证等业务) 2、多张图片上传(如某类工单记录) 3、上传图片时期望能按指定尺寸压缩处理 4、上传图片...
axios+Vue实现上传文件显示进度功能
10-17
在本文中，我们将探讨如何使用axios和Vue.js框架来实现文件上传并实时显示上传进度的功能。这个功能在现代Web应用中十分常见，特别是在处理大文件上传时，用户界面的反馈至关重要，以提供良好的用户体验。 首先，...
vuejs使用FormData实现ajax上传图片文件
10-19
本篇文章主要介绍了vuejs使用FormData实现ajax上传图片文件，具有一定的参考价值，有兴趣的可以了解一下
vue中使用axios post上传头像/图片并实时显示到页面的方法
10-17
今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue axios 中提交表单数据(含上传文件)
12-02
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form method="post" a
nodejs使用axios以formdata形式上传图片
qq_27161847的博客
10-31 658
nodejs使用axios以formdata形式上传图片
vue中，上传图片的流程
qq_45758925的博客
05-16 3387
则显示"File uploaded successfully."消息，否则显示"Failed to upload file."消息。这样，当用户上传文件时，组件会自动将文件提交到服务器，并根据服务器响应显示不同的消息。语句中处理响应，并根据响应数据显示不同的消息或执行不同的操作。我们还添加了一个"Upload"按钮，用于触发文件上传操作。语句中处理响应，并根据响应数据显示不同的消息。首先，你需要在Vue组件中添加一个上传组件，例如。在这里，我们添加了一个上传组件，并将其绑定到。指令将文件绑定到组件中。
axios上传多张图片
菜菜鸟的博客
10-23 2110
场景 项目使用的axios做异步提交，现在需要上传多张图片至后台，但是后台接收不到图片参数，而其他参数却能得到 2.问题 普通提交方式无法提交图片数组的（转化成字符串，序列化传输会出问题） 3.解决办法 使用表单格式提交，注意设置header内容格式 注意：不要直接将图片数组赋值给FormData对象的属性，否则同样传输不了数据，一定要遍历添加 ...
vue+axios上传文件的几种方式及步骤（以上传图片为例）
热门推荐
youngeffort的博客
04-25 1万+
1、用js的formData对象上传（服务器返回url地址） <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> methods: { update(e){ let file = e.targe...
前端vue uni-app多图片上传组件，支持单个文件，多个文件上传 步骤条step使用
chenchuang0128的博客
05-30 2966
提交
vue项目中封装手动上传多个图片并支持修改和移除
weixin_64141611的博客
04-20 566
现有的组件库无法满足手动上传文件到服务器，并支持通过按钮修改和移除文件的操作。所以我利用原生input进行封装，如有需要请拿走
elment form表单中上传图片
01-31
在element form表单中上传图片，可以通过使用element-ui的upload组件来实现。该组件提供了简单易用的上传图片功能。 首先，在Vue组件的template中添加upload组件： ```html <el-upload class="upload-demo" action="/file/upload" //设置上传地址 :on-success="handleSuccess" //设置上传成功的回调函数 :before-upload="beforeUpload" //设置上传前的回调函数 :file-list="fileList" //绑定上传的文件列表 multiple //设置是否支持多文件上传 :auto-upload="false" //设置是否自动上传 > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> ``` 然后，在Vue组件的script部分定义相关方法： ```javascript data() { return { fileList: [] //定义文件列表 }; }, methods: { handleSuccess(response, file, fileList) { //上传成功的回调函数 console.log(response); }, beforeUpload(file) { //上传前的回调函数 const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt500KB = file.size / 1024 < 500; if (!isJPG && !isPNG) { this.$message.error('只能上传jpg/png格式的图片'); } if (!isLt500KB) { this.$message.error('图片大小不能超过500KB'); } return (isJPG || isPNG) && isLt500KB; }, }, ``` 在以上代码中，我们通过设置action属性来指定文件上传的地址，通过on-success属性绑定上传成功时的回调函数handleSuccess，通过before-upload属性绑定上传前的回调函数beforeUpload来限制文件类型和文件大小。 其中，handleSuccess方法用于处理上传成功后的逻辑，比如展示上传成功的图片或者返回的图片链接。beforeUpload方法用于判断文件类型和文件大小是否符合要求，若不符合要求则会弹出错误提示。 最后，通过样式调整可以美化上传按钮和提示文字。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 190
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值