[阅读笔记]前端本地文件操作与上传

[链接](https://juejin.im/post/5a193b4bf265da43052e528a)
### 前端本地文件操作与上传
前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发。
该文章主要讲述了三种文件触发的方式
### 三种方式
1. 通过input type="file"选择本地文件
2. 通过拖拽的方式把文件拖过来
3. 在编辑框里面复制粘贴
**注：第三种方式中的粘贴指的是键盘的粘贴，鼠标的右键粘贴不起作用**

### 通过这篇文章学到了什么？
之前只了解 input type="file"来处理文件，通过这篇文章又get到了其他两种处理文件的形式

处理get到了两种新的文件读取形式之外还get到了一些操作文件的相关内容，具体如下：
#####1. 文件读取的三种格式
a.按base64的方式读取，结果是base64，任何文件都可转成base64的形式

```
fileReader.readAsDataURL(this.files[0]);
```
b. 以二进制字符串方式读取，结果是二进制内容的utf-8形式，已被废弃了

```
fileReader.readAsBinaryString(this.files[0]);
```
c.以原始二进制方式读取，读取结果可直接转成整数数组

```
fileReader.readAsArrayBuffer(this.files[0]);
```
#####2. 三种方式中，文件对象的位置
a. input type="file"

```
this.files[0]
```
b. 拖拽的方式

```
// event的dataTransfer对象里
event.originalEvent.dataTransfer.files[0]
```
c. 编辑框里面复制粘贴

```
// 在event.clipboardData.files里面：
event.originalEvent.clipboardData.files[0]
```
#####3. get到了一种数据存储格式blob ，可以存储几乎任何格式的内容
a. 如何将本地的图片地址转化为blob格式

```
<script>
var eleAppend = document.getElementById("forAppend");
window.URL = window.URL || window.webkitURL;
if (typeof history.pushState == "function") {
var xhr = new XMLHttpRequest();
xhr.open("get", "./hot.png", true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
img.src = window.URL.createObjectURL(blob);
eleAppend.appendChild(img);
}
}
xhr.send();
} else {
eleAppend.innerHTML = '<p style="color:#cd0000;">请更换浏览器重试~</p>';
}
// blob:http://localhost:63342/02d0f649-b359-42c6-80d0-b66f2e4d2d0f
</script>
```
b. 获取本地的blob 数据

```
$('#forAppend').bind('paste', function (event) {
// 需要setTimeout 0等图片出来了再处理
setTimeout(() => {
let img = $(this).find("img[src^='blob']")[0];
// 用一个xhr获取blob数据
let xhr = new XMLHttpRequest();
xhr.open("GET", img.src);
// 改变mime类型
xhr.responseType = "blob";
xhr.onload = function () {
// response就是一个Blob对象
console.log(this.response);
readBlob(this.response);
// Blob {size: 0, type: "text/plain"}

};
xhr.send(this.response);
}, 10);
});
```
#####4. 上面处理和上传文件的API
######1.window.URL 和 window.webkitURL
属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象
调用一个静态方法：

```
img.src = window.URL.createObjectURL(blob);
```
构造一个新对象：

```
var url = new URL("../cats/", "https://www.example.com/dogs/");
```

window.webkitURL 用法和window.URL 相同用于手机端
######2. 字符串和base64之间转换的API
```
window.atob(base64) --> string
例子：
window.atob("bGl1c2hpeXU=")
//"liushiyu"
window.btoa(content) --> base64
例子：
window.btoa(‘liushiyu’)
// "bGl1c2hpeXU="
```