vue+axios实现带文件表单上传

最新推荐文章于 2022-08-07 23:38:44 发布

Rebours�

最新推荐文章于 2022-08-07 23:38:44 发布

阅读量527

点赞数

本文链接：https://blog.csdn.net/weixin_44928843/article/details/102697920

版权

本文介绍了如何在Vue项目中使用axios和element-ui的upload组件实现带图片的表单上传功能。关键点在于使用file对象和FormData对象进行参数传递，axios会根据FormData自动设置content-type。

摘要由CSDN通过智能技术生成

vue+axios实现带文件表单上传

最近vue项目中需要实现带图片的表单上传功能,业务场景如下:
网页的表单截图
使用element-ui的upload组件,当然也可以利用原生input标签设置type='file’结合jquery实现文件选择和获取,重点在于获取file对象并使用FormData对象传参,代码如下:

            <el-upload
              style="display: inline-block;"
              size="mini"
              :auto-upload="false"
              class=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rebours�

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

elementui+vue+axios实现多文件上传及点击文件进行文件下载

Grady_H的博客

12-29

1609

工作中使用到el-upload组件多文件上传功能，在此记录实现方式 1、组件部分代码展示 <template> <el-form> <el-form-item label="上传文件：" prop="ethicNo"> <el-upload class="upload-demo" action="#" :auto-upload="false" :before-remove="beforeRemove"

vue使用axios上传文件(FormData)的方法

12-08

在此主要介绍如何使用 formData 对象上传单文件和多文件，FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。过多介绍不说，过多的煽情语句不说，直接来来干活，希望对广大博友有所帮助。也希望各位大神不吝赐教 1.前台上传文件的表单和响应函数  <form> <input type="text" value="" v-model="name" placeholder="请输入用户名"> <input type="text" value="" v-mod

参与评论您还未登录，请先登录后发表或查看评论

axios实现简单文件上传功能

01-19

本文实例为大家分享了axios实现文件上传功能的具体代码，供大家参考，具体内容如下前台页面：引入axios js文件 [removed][removed] HTML: <input type=file name=img/> 上传图片 JS: function upload() { alert(上传) let file = document.getElementsByName('img')[0].fil

vue-记一次使用axios封装文件上传的实操

sssdal19995的博客

07-18

729

以前没有vue的时候我们通常使用ajax进行文件上传，但是vue中建议使用axios，所以再实际生产环境，我们使用axios来封装了van-uploader,适配于公司项目的开发 const formData = new FormData(); // 声明一个FormData对象 formData.append("file", file.file); // 获取上传地址 let uploadUrl = '' this.$axios.post(uploadUrl , formData, { //添加

vue+axios实现文件下载及vue中使用axios的实例

12-09

功能：点击导出按钮，提交请求，下载excel文件；第一步：跟后端童鞋确认交付的接口的response header设置了以及返回了文件流。第二步：修改axios请求的responseType为blob，以post请求为例： axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response => { this.download(response) }

jQuery.form插件的使用及跨域异步上传文件

10-22

个跨域异步上传功能我们借助了Jquery.form插件。接下来通过本文给大家介绍jQuery跨域异步上传文件的相关知识，感兴趣的朋友一起学习吧

vue+vuex+axios实现登录、注册页权限拦截

08-27

Vue+Vuex+Axios实现登录、注册页权限拦截在本篇文章中，我们将探讨使用Vue、Vuex和Axios来实现登录和注册页的权限拦截。这个项目基于模板，具有很好的参考价值。一、修改配置文件首先，我们需要修改config...

vue+axios新手实践实现登陆的示例代码

12-11

用到的：1、 vuex 2、axios 3、vue-route 登陆流程为： 1、提交登陆表单，拿到后台返回的数据 2、将数据存入vuex vuex配置这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue from...

Vue+Axios+Element 实现表单提交文件图片上传到服务器Tomcat【前后端】

qq_43606316的博客

12-15

2258

参考博客 https://blog.csdn.net/weixin_40667613/article/details/90717447 https://blog.csdn.net/theblackbeard/article/details/54673581 https://blog.csdn.net/linghuainian/article/details/82253247 https://blog.csdn.net/qq_41688165/article/details/80834842 前端效果图

vuejs使用FormData实现ajax上传图片文件

12-29

我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了相关的npm包，但是我想说用原生的js api来实现，也用不了多少代码，而且更灵活，能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。效果图前端实现 <template> <div class=admin> <div class=admin-content> <div class=edit> <div class=ava

Vue 文件上传的属性解释

m0_53075883的博客

01-08

1427

代码 <el-button type="primary" @click="dialogFormVisible = true,form = {}">新增</el-button> <el-dialog title="新增" :visible.sync="dialogFormVisible"> <el-form ref="form" :model="form" label-width="80px"> <el-for...

axios在vue中文件上传02

yuguang的博客

04-13

525

目录 1、提交方式1--使用el自定义的action的提交 2、提交方式2--使用el的http-request自定义的action的提交 3、提交方式3--使用this.$refs去获取 1、提交方式1--使用el自定义的action的提交 <el-form :model="form" id="upload_form"> <el-upload r...

使用elementui + axios上传图片踩过的坑

qq_25529689的博客

08-19

773

1.先了解一下axios axios中文文档介绍：http://www.axios-js.com/zh-cn/docs/ 执行GET请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 上面的请求也可以这样做 axios.get..

axios上传视频或音频时后端接口405

sunny327的专栏

05-20

2154

最近在做一个后台管理项目，视频上传到腾讯云点播，音频上传到对象存储。这就需要区分是视频或音频了。当上传音频时调用后端给的接口，上传到对象存储。这里遇到的问题主要是自己对axios不太熟练，导致后台接口返回405， HTTP Status 405 – Method Not Allowed TypeStatus Report MessageRequest method 'GET' n...

vue使用axios上传文件

tiger_Angle

03-21

2967

1.安装axios cnpm i axios -S 2.方案一：修改原型链首先，在main.js中引入在这个时候，你还是无法在组件中使用axios的，但如果将vue改为vue的原型链，就可以解决这个问题，如下图开始发送请求 //获取表单中的file var file_obj = document.getElementById('fileaaa').files[0]; ...

【实习小tip】axios发送POST请求时携带文件加参数的写法以及文件上传报错：Current request is not a multipart request

fangyuan__的博客

08-07

4056

axios发送POST请求时携带文件加参数的写法以及文件上传报错：Current request is not a multipart request

axios 表单（formData）方式提交请求，以及文件上传方式