使用axios上传照片
原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。安装axios的话：1-利用npm安装npm install axios –save2、 利用bower安装bower install axios –save3、 直接利用cdn引入<script src="https://unpkg.com/axios/
·
原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。
安装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>
4-或者使用ES6的写法引入
import axios from 'axios'
使用的话可以参考这篇文章：http://www.jianshu.com/p/df464b26ae58
这里我只讲一下，如何使用axios上传照片：
一般情况上传照片有两种方式：
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)
})
}
/*
http://172.19.26.60:8081/rest/user/headurl这里是你的服务器接口地址
*/
其实你可以先在postman中进行测试
这里注意的是，设置 Content-Type
下面附加一个完整的单个实例：
<html>
<head>
<title>mayouchen</title>
</head>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
function uploadpic(e){
var self = this
console.log(e.target);
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("222222");
console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 添加请求头
axios.post('http://xingchen.mengdian.com/rest/user/headurl', param, config)
.then(response => {
console.log("222222");
if (response.data.code === 0) {
console.log(response.data.data);
}
console.log(response.data)
})
}
</script>
<body>
<div class='form-div'>
<div class="up-pic">
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" onclick="uploadpic(event)"/>
</div>
</div>
</body>
</html>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献67条内容
所有评论(0)