原生的文件域，选择图片，点击 打开 的时候触发（当文件域里面的内容有改变的时候触发）
<body>
<input type="file" name="" id="fileId" onchange="changeFn()">
<script>
function changeFn() {
/* 获取文件域元素 */
let fileDOM = document.getElementById('fileId');
/* 打印出 文件域中具体传入的文件 */
console.log(fileDOM.files[0])
/* 实例化一个表单对象 */
let formdata = new FormData();
/* 使用append方法，添加一个name叫file的文件 */
/* name具体叫什么，是由后端的接口文档提供的 */
formdata.append('file', fileDOM.files[0]);
/* 创建一个xhr对象 */
let xhr = new XMLHttpRequest();
/* 参照接口文档使用post请求，采用异步的方式 */
xhr.open('post', 'https://。。。', false)
/* 设置请求头，名字叫Authorization，值是token值 */
xhr.setRequestHeader('Authorization', 'Bearer。。。')
/* 使用onreadystatechange去监听数据的返回，如果状态为4，表示请求已完成
已完成就打印相关的数据 */
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
/* console.log(JSON.parse(xhr.responseText)); */
let { meta } = JSON.parse(xhr.responseText);
/* 状态码为200 表示请求成功 */
if (meta.status == 200) {
alert(meta.msg)
}
}
}
/* 把添加完文件的表单对象传给服务端 */
xhr.send(formdata)
}
</script>
</body>
