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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！