使用axios上传照片的方法

原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。

安装axios的话：

1-利用npm安装npm install axios –save

2-使用ES6的写法引入

import axios from 'axios'

我们可能会想，如何使用axios上传照片： 
一般情况上传照片有两种方式：

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

　　操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法，还有就是最近我想应用到微信小程序中，发现小程序目前还不可以将图片转换为base64.

以下是我的代码

HTML代码：

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代码：

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-点击对应的那个请求

可以看到