vue项目中使用axios上传图片等文件操作


Posted in Javascript onNovember 02, 2017

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

首先安装axios:

1.利用npm安装npm install axios ?save

2.利用bower安装bower install axios ?save

3.直接利用cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

一般情况上传照片有两种方式:

1.本地图片转换成base64,然后通过普通的post请求发送到服务端。

操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法

2.通过form表单提交。

form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据。

这里只讲解一下第二种方式:

html代码:

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js代码:

import axios from 'axios'
// 添加请求头
update (e) {  // 上传照片
   var self = this
   let file = e.target.files[0]
   /* eslint-disable no-undef */
   let param = new FormData() // 创建form对象
   param.append('file', file, file.name) // 通过append向form对象添加数据
   param.append('chunk', '0') // 添加form表单中其他数据
   console.log(param.get('file')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
   let config = {
    headers: {'Content-Type': 'multipart/form-data'}
   }
   // 添加请求头
  axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
    .then(response => {
     if (response.data.code === 0) {
      self.ImgUrl = response.data.data
     }
     console.log(response.data)
    })
  }

总结

以上所述是小编给大家介绍的vue项目中使用axios上传图片等文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
小程序实现五星点评效果
Nov 03 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
JavaScript登录验证基础教程
Nov 01 #Javascript
vue打包后显示空白正确处理方法
Nov 01 #Javascript
js实现登录与注册界面
Nov 01 #Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 #Javascript
五步轻松实现zTree的使用
Nov 01 #Javascript
BootStrap TreeView使用实例详解
Nov 01 #Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
浅析is_writable的php实现
2013/06/18 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
党支部半年考察意见
2015/06/01 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android