vue项目中使用axios上传图片等文件操作
更新时间：2017年11月02日 08:32:51 作者：风雨后见彩虹
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧
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上传图片等文件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
element-plus中el-upload组件限制上传文件类型的方法
Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍Vue3中简单diff算法的实现与使用，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下2022-09-09
这篇文章主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下2018-10-10
这篇文章主要为大家详细介绍了Vue实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了10分钟上手vue-cli 3.0 入门介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
elementui的table根据是否符合需求合并列的实现代码
这篇文章主要介绍了elementui的table根据是否符合需求合并列的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue工程如何为组件自动注入全局样式文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
最新评论