关于前端原生JS上传文件和接受文件流（例excel）
2019-11-28 本文已影响0人
虚拟J
上传文件
有关于前端上传文件这块，回想起来，发现和大多数人一样，都是直接用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>
最后还发现了下面的文章，可以更具体的了解有关于文件上传。
揭秘前端文件上传原理（一）
揭秘前端文件上传原理（二）
接受文件流
底层就是创建 blob对象 （第一个参数代表后端返回的文件流 ，第二个参数设置文件类型）
下面使用 fetch 为例：
fetch(`url?arg=${arg}`)
.then(resp => resp.blob())
.then(res => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = "filename.xlsx";
a.click();
})
下面使用 axios 为例：
axios.post(url, arguments, { responseType: 'blob' })
.then(res => {
const url = window.URL.createObjectURL(res.data);
const a = document.createElement('a');
a.href = url;
a.download = "filename.xlsx";
a.click();
})
额外小点：
- 一般情况下，我们都是隐藏难看的 input 元素，显示自己的界面来打开文件选择器，一般都是用一下几种：
1.通过click()方法使用隐藏的 input 元素
2.使用label元素来触发一个隐藏的 input元素（
<input type="file" id="fileElem" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>
）
3.使用拖拽来选择文件
- 最后我突然想到一个问题点：可以直接用 js 代码，不通过input打开文件选择框吗？
答：据我了解，发现出于安全考虑，规定这样子是不允许的。（另外 input 如果上传的是同一个文件，是不会触发事件的）
参考链接：在web应用程序中使用文件
