vue上传图片到服务器

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

可以看到

---------------------

作者：小江_