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上，可以實作無重新整理送出資料。
import axios from 'axios'
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-點選對應的那個請求
可以看到
---------------------
作者：小江_