关于前端原生JS上传文件（图片，excel等）「建议收藏」

编程小6 前端 (84) 2023-07-02 18:12

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说关于前端原生JS上传文件（图片，excel等）「建议收藏」,希望能够帮助你!!!。

关于前端上传文件这块，回想起来，发现和大多数人一样，都是直接用UI 组件库或者UI 框架。思考了一下，如果用原生的js去写上传图片，该怎么做呢？很简单的问题，我竟然犹豫了。。。只记是要通过 <input type="file"> 去上传文件。。。

问题1：上传的文件被存在哪里了？
答：文件上传后，会被储存在 input 节点中的 files 属性里。
问题2：之后怎么传给服务器？
答：需要 new 一个 FormData 的实例，然后用 append 方法将文件内容添加。

实际上的代码很简单。

<!DOCTYPE html>
<html>
<body>
 <input type="file" onchange="up(this)">
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 function up(e) {
 let form = new FormData();
 form.append('file', e.files[0]);
 axios({
 method: 'post',
 url: 'https://xxx/xxx',
 data: form
 })
 }
</script>
</html>