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 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
深入分析php之面向对象
2013/05/15 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
几行js代码实现自适应
2017/02/24 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
详解Python中的条件判断语句
2015/05/14 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
专项法律服务方案
2014/06/11 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014年基建工作总结
2014/12/12 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
旅游投诉信范文
2015/07/02 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android