文件上传了解

2018-10-11 本文已影响17人 zwj2024

1.上传方案

1、上传文件流到数据库
2、上传base64或者blob到数据库
3、当图片很多的时间，需要建立一个图片库，专门保存图片。然后将图片路径存到数据库

前两种方法当你的图片太大的话就不适用了。我用的是在前台将图片转换为base64然后传到后台保存导数据库，这样下次直接取出来放到src属性中就可以显示图片了。第三种方式其实应该是很常用。

2.涉及需要掌握的点

1、Blob

1、Blob，Binary Large Object的缩写，代表二进制类型的大对象。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，Blob对象即是类似文件对象的二进制数据。

2、base64编码

1、简单来说，任何一个数据无非可以看作一个比特流，如01000100010......那么我们取6个比特为一组，计算它的ascii值，得到一个字符，这个字符肯定是可见字符，好，把它对应的字符写出来，再取6个比特，计算...，如此下去，直到最后，就完成了base64编码。
2、Base64编码的主要的作用不在于保证二进制数据的安全，而在于让内容能在各个网关间无错的传输，这才是Base64编码的核心作用。（在计算机中任何数据都是按ascii码存储的，而ascii码的128～255之间的值是不可见字符。而在网络上交换数据时，比如说从A地传到B地，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以就先把数据先做一个Base64编码，统统变成可见字符，这样出错的可能性就大降低了。）
3、有些图片src采用Base64编码不仅比较简短，同时也具有不可读性，即所编码的数据不会被人用肉眼所直接看到。还有减少http请求。

3、原生实现图片上传前后端代码实现-formData

1、上传了一个二进制文件，即上传文件流到服务端处理。

4、上传图片预览

file按钮上传文件，点击确定马上就能看到预览的效果，但无论怎样都取不到file上图片的真实路径，得到的反而是C:\fakepath\a.jpg，这个路径是错误的。浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替。
方法1：FileReader。readAsDataURL读取为 DataURL。
方法2：URL.createObjectURL(blob)。
方法3: 用上传到cdn服务器的地址。

5、Blob URL和Data URL

Blob URL是blob协议的URL，它的格式如下：blob:http://XXX。
常见的场景有：作为文件的下载地址和作为图片资源地址。

下载地址：

var link = document.getElementsByTagName("a")[0];
link.download = "file";
link.href = URL.createObjectURL(blob);
//点击a标签就可以下载了

图片资源地址

var file = e.files[0];
var blob = URL.createObjectURL(file);
var img = document.getElementsByTagName("img")[0];
img.src = blob;
img.onload = function(e) {
     URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象##
}

Blob URL和Data URL区别
- 1、Blob URL的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，浏览器在显示Data URL时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。
- 2、Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，你可以在任意浏览器中使用。
- 3、除了可以用作图片资源的网络地址，Blob URL也可以用作其他资源的网络地址，例如html文件、json文件等，为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type。
```
// 创建HTML文件的Blob URL
var data = "<div style='color:red;'>This is a blob</div>";
var blob = new Blob([data], { type: 'text/html' });
var blobURL = URL.createObjectURL(blob);

// 创建JSON文件的Blob URL
var data = { "name": "abc" };
var blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
var blobURL = URL.createObjectURL(blob);
```
- 4、Blob URL可以方便的使用XMLHttpRequest获取源数据，对于Data URL，并不是所有浏览器都支持通过XMLHttpRequest获取源数据的。
```
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// 如果设置x.responseType = 'blob'，将返回一个Blob对象，而不是文本:
x.onload = function() {
  alert(x.responseText);   // 弹出 Test
};
console.log(blobUrl)
x.open('get', blobUrl);
x.send();
```

3.项目中需要考虑的技术埋点

问题1: html自带file控件样式丑陋，如何达到UI设计要求效果；

btn.onclick = function() {
     file.click() // 调取系统选择图片的弹框
}

问题2: 选择图片后，按照一定的样式回显示图片如何实现；

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。

function previewImg(){
    let preview = document.querySelector('img[id=preview]');
    let file = document.querySelector('input[id=file]').files[0];
    let reader = new FileReader();
    reader.onloadend = function () {
        preview.src = reader.result;
    }
    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
    }       
}

问题3: 无刷新提交，采用原始的ajax提交

1）let request = new XMLHttpRequest() 
2）request.open("POST", url) 
3）request.onload = function(oEvent) { 
     if (request.status == 200) { 
           //alert(“success”); 
     } else { 
            //alert(“出错啦！请稍后再试。” + request.status); 
     } 
   }; 
4) request.send(formData);

问题4: 序列化(serialize())表单是无法序列化二进制数据的，该如何提交文件类型？
故我们采用FormData的方式提交文件类型。
问题5: JS选择器获取单个文件、“multiple”类型多文件及非“multiple”类型的多个同类型input控件文件；
1）单个文件；

document.querySelector('input[id="file"]').files[0];

2）若是“multiple”类型的input控件，即一个input控件可以同时选择多个文件（<input type=”file” multiple=”multiple” />）；

document.querySelector('input[id="file"]').files;
document.querySelector('input[id="file"]').files.length;

我们考虑下另外一种方式，采用追加的方式实现多图预览，譬如有多个id同为file的input组件，且全是单选，这些照片为一组，需要统一获取并上传；

let files = document.querySelectorAll('input[id="file"]');
let formData = new FormData();
for(let i=0;i<files.length;i++){
    //将一组文件类型追加至file集合中
    //这样即可将一组文件加入FormData的同一key下，一同提交。
    formData.append("file",files[i].files[0]);
}

问题6：File API
1）File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
2）FileList - File 对象的类数组序列（多文件上传）。
3）Blob - 可将文件分割为字节范围。
4）FileReader - 读取File或Blob
2）// 检测是否支持File API

if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  支持
} else {
  alert('不支持');
}

问题7：FileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存，以供js调用。
1）FileReader有四种读取文件的方式：

1.readAsBinaryString读取为二进制码
2.readAsDataURL读取为 DataURL
3.readAsText读取为文本
4.readAsArrayBuffer

2）DataURL有其固定的格式，如下：data:[文件格式];base64,[文本流base64编码]。、举个例子： •jpg格式: data:image/jpeg;base64,/9j/4...

问题8：URL.createObjectURL(blob)
1）方法会创建一个参数中给出的对象的URL。
2）参数blob是用来创建 URL 的File对象和Blob对象。
3）oPreview.src = window.URL.createObjectURL(oFile);

console.log(window.URL.createObjectURL(oFile));
"blob:http://null.jsbin.com/2099b053-bbd4-4e46-864d-9b2b0abc09e6"

参考

详解Blob
Base64 的原理、实现及应用
 FileReader以及URL.createObjectURL(blob)上传图片预览代码实现

文件上传了解

猜你喜欢

热点阅读