vue上传图片到服务器

https://blog.csdn.net/qq_29712995/article/details/78839093（copy）

 

 

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

可以看到

---------------------
作者：小江_
来源：CSDN
原文：https://blog.csdn.net/qq_29712995/article/details/78839093
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/dianzan/p/10678363.html