使用axios上传照片的方法

原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。安装axios的话：1-利用npm安装npm install axios –save2-使用ES6的写法引入import axios from 'axios'我们可能会想，如何使用axios上传照片： 
一般情况上传照片有两种方式：1.本地图片转换成base64，然后通过普通的post请求发送到服务端。　　操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法，还有就是最近我想应用到微信小程序中，发现小程序目前还不可以将图片转换为base64.以下是我的代码HTML代码：<input accept="image/*" name="img" id="upload_file" type="file">JS代码：

var file = document.getElementById("upload_file").files[0];
var r = new FileReader();  //本地预览
r.onload = function(){
console.log(r.result);//图片的base64
}
r.readAsDataURL(file);    //Base64

2.通过form表单提交。　　form表单提交图片会刷新页面，也可以是form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。HTML代码：<input accept="image/*" name="img" id="upload_file" type="file">JS代码：import axios from 'axios'

var file = document.getElementById("upload_file").files[0];
var formdata1=new FormData();// 创建form对象
formdata1.append('img',file,file.name);// 通过append向form对象添加数据,可以通过append继续添加数据
//或formdata1.append('img',file);
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
axios.post('/xapi/upimage',formdata1,config).then(response)=>{ //这里的/xapi/upimage为接口
console.log(response.data);
})这里注意的是，设置 的Content-Type查看是否成功：按F12-network-点击对应的那个请求可以看到