一.项目场景
项目中经常会用到上传图片上传视频等功能，由于后端nginx限制，经常要进行文件转化才能上传，大文件可能还要进行切片上传处理。
二.原生js实现上传功能的简单案例（上传图片）
1.html部分
<div class="about"> <input type="file" accept=".png" id="files" style="display:none;"> <img :src="imgSrc" alt="" @click="inputClick"> </div>
2.js部分
inputClick () { // 触发上传文件的文件框 document.getElementById('files').click(); let that = this; document.getElementById('files').onchange = function (val) { that.imgfiles = val.target.files[0]; } console.log(this.imgfiles); }
3.控制台打印结果
三.将文件转化成base64、blob
1.base64：简单的来说base64就是一种二进制到文本的编译方式，base64不加密，浏览器加载快，但是他的大小要比原图片文件大，所以只有上传图片时建议大家转base64,视频文件的话就算了，低于50MB的视频大家也可以用base64。
getbase64 () { let reader = new FileReader(); console.log(reader); reader.readAsDataURL(this.imgfiles); reader.onload = (e) => { this.imgSrcbase64 = e.target.result; console.log(this.imgSrcbase64); } }
打印结果：
2.Blob：Blob（Binary Large Object）表示二进制类型的大对象。blob经常被用作上传大文件，通过blob构造函数生成一个blob对象对文件进行处理，生成一个blob文件流，blob是加密的，这点和base64完全不同，它还可以用到切片，为了更直观的了解blob，废话不说了，我也不是太懂这玩意，直接上代码。
getblob () { let reader = new FileReader(); reader.readAsArrayBuffer(this.imgfiles); reader.onload = (e) => { let data; if (typeof e.target.result === 'object') { data = window.URL.createObjectURL(new Blob([e.target.result])); } else { data = e.target.result; } this.imgBlob = data; console.log(this.imgBlob); } }
打印结果：
