js文件上传原理（form表单，FormData + XHR2 + FileReader + canvas）

2022-07-09 22:46:25

form表单上传
FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例

目前实现上传的方式

浏览器小于等于IE9(低版本浏览器)使用下面的方式实现的

flash实现（主流插件的方式，本文不涉及）
form + iframe（项目中很少用到，本文不涉及）

form表单提交的方式是所有浏览器都支持的，借助iframe是为了实现不刷新界面上传

主流浏览器 + IE10+ 则是通过以下方式实现的上传

FormData + XHR2 + FileReader + canvas

FormData介绍

FormData接口提供了一种轻松构造一组表示表单字段及其值的键/值对的方法，然后可以使用XMLHttpRequest.send()方法轻松地发送这些值。如果将编码类型设置为“multipart/form-data”，则使用与表单相同的格式。

常用方法：

FormData.append(0; // 添加键值对

FormData.delete(); // 删除键值对

FormData.entries(); // 返回允许遍历此对象中包含的所有键/值对的迭代器

...具体还有很多方法可以参考网站：FormData

XMLHttpRequest简介

使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。

常用属性和方法

const xhr = new XMLHttpRequest()

// 常用属性

xhr.onreadystatechange // 当readyState属性发生变化时调用的函数

xhr. readyState // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

xhr.responseText // 包含对请求的响应，如果请求未成功或尚未发送，则返回null

xhr.timeout // 表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。

xhr.upload  // 表示上传过程。

// 常用方法

xhr.abort() // 中止请求

xhr.open() // 初始化一个请求。该方法只能JavaScript代码中使用

xhr.setRequestHeader() // 设置HTTP请求头的值

xhr.send() // 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回

更多关于XMLHttpRequest的信息点击：XMLHttpRequest

FileReader

对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

属性：

FileReader.error // 表示在读取文件时发生的错误

FileReader.readyState // 表示FileReader状态的数字。0:还没有加载任何数据; 1:数据正在被加载；2:已完成全部的读取请求

FileReader.result // 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件处理

FileReader.onabort= ()=>{} // 该事件在读取操作被中断时触发

FileReader.onerror = ()=>{} // 该事件在读取操作发生错误时触发。

FileReader.onload = ()=>{} // 该事件在读取操作完成时触发。

FileReader.onloadstart = ()=>{} // 该事件在读取操作开始时触发

FileReader.onloadend = ()=>{} // 该事件在读取操作结束时（要么成功，要么失败）触发

FileReader.onprogress = ()=>{} // 该事件在读取Blob时触发

方法

FileReader.abort() // 中止读取操作。在返回时，readyState属性为DONE

FileReader.readAsArrayBuffer() // 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象

FileReader.readAsDataURL() // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容

FileReader.readAsText() // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

form表单上传

<form id="uploadForm" method="POST" action="upload" enctype="multipart/form-data">

      <input type="file" id="myFile" name="file" />

      <input type="submit" value="提交" />

</form>

所有浏览器都支持的上传方式，且submit提交后页面会刷新。

action: 提交地址

enctype的常见类型(告诉服务器我们发送过去的数据是用哪种格式进行编码的)

application/x-www-form-urlencoded (默认数据编码方式)
multipart/form-data(复杂，但它允许在数据中包含整个文件，所以常用于文件上传)
text/plain(一般用于debug)

FormData + XHR2 + FileReader + canvas

【实现步骤】

监听一个input(type=‘file’)的onchange事件，这样获取到文件file；
将file转成dataUrl;
然后根据dataUrl利用canvas绘制图片压缩，然后再转成新的dataUrl；
再把dataUrl转成Blob；
把Blob append进FormData中；
xhr实现上传。

HTML代码

<input type="file" name="file" accept=“image/*” onchange='handleInputChange(event)'>

1、监听input的change事件

function handleInputChange (event) {

    const file = event.target.files[0];  // 获取当前选中的文件

    const imgMasSize = 1024 * 1024 * 10; // 限制大小10MB

    // 检查文件类型

    if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[1]) < 0){

        // 不支持该文件类型

    }

    // 文件大小限制

    if(file.size > imgMasSize ) {

        // 文件大小自定义限制

    }

    // 图片压缩处理函数

    transformFileToDataUrl(file);

}

2、将file转成dataUrl

function transformFileToDataUrl (file) {

    const imgCompassMaxSize = 200 * 1024; // 超过 200k 就压缩

    // 存储文件相关信息

    imgFile.type = file.type || 'image/jpeg';

    imgFile.size = file.size;

    imgFile.name = file.name;

    imgFile.lastModifiedDate = file.lastModifiedDate;

    // 封装好的函数

    const reader = new FileReader();

    // file转dataUrl是个异步函数,onload表示读取完成了

    reader.onload = function(e) {

        const result = e.target.result;

        if(result.length < imgCompassMaxSize) {

            compress(result, processData, false );    // 图片不压缩

        } else {

            compress(result, processData);            // 图片压缩

        }

    };

    reader.readAsDataURL(file);

}

3、canvas进行压缩的处理

function compress (dataURL, callback, shouldCompress = true) {

    const img = new window.Image(); // new 一个图片对象

    img.src = dataURL;  // 通过fileReader读取到的base64数据

    img.onload = function () {

        // 1、创建canvas上下文

        const canvas = document.createElement('canvas');

        const ctx = canvas.getContext('2d');

        // 获取图片宽高赋值给canvas绘图

        canvas.width = img.width;

        canvas.height = img.height;

        // 绘制出一张canvas图片

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        let compressedDataUrl;

        if(shouldCompress){

            compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2); // 后面的系数是绘图输出图片质量

        } else {

            compressedDataUrl = canvas.toDataURL(imgFile.type, 1); // 不改变原图质量

        }

        document.getElementById('preview').appendChild(img);

        callback(compressedDataUrl); // 最后图片压缩好后，去进行base64 -> blob的转换(传递到后台)

    }

}

4、把Blob append进FormData中；

function processData (dataURL) {

    const binaryString = window.atob(dataURL.split(',')[1]); // window.atob对用base-64编码过的字符串进行解码

    const arrayBuffer = new ArrayBuffer(binaryString.length); // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

    const intArray = new Uint8Array(arrayBuffer); // Uint8Array类型化数组表示一个由8位无符号整数组成的数组。内容初始化为0。一旦建立，您可以使用对象的方法或使用标准数组索引语法(即使用括号符号)引用数组中的元素。

    for (let i = 0, j = binaryString.length; i < j; i++) {

        intArray[i] = binaryString.charCodeAt(i);

    }

    const data = [intArray];

    let blob;

    // 通过兼容性判断，最后转换为二进制数据

    try {

        blob = new Blob(data, { type: imgFile.type });

    } catch (error) {

        window.BlobBuilder = window.BlobBuilder ||

            window.WebKitBlobBuilder ||

            window.MozBlobBuilder ||

            window.MSBlobBuilder;

        if (error.name === 'TypeError' && window.BlobBuilder){

            const builder = new BlobBuilder();

            builder.append(arrayBuffer);

            blob = builder.getBlob(imgFile.type);

        } else {

            throw new Error('版本过低，不支持上传图片');

        }

    }

    // blob 转 file

    const fileOfBlob = new File([blob], imgFile.name); // File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。

    const formData = new FormData(); // 把要传输的数据添加到FormData()对象中

    // type

    formData.append('type', imgFile.type);

    // size

    formData.append('size', fileOfBlob.size);

    // name

    formData.append('name', imgFile.name);

    // lastModifiedDate

    formData.append('lastModifiedDate', imgFile.lastModifiedDate);

    // append 文件

    formData.append('file', fileOfBlob);

    uploadImg(formData); // 调用xhr发送数据到后台

}

5、xhr实现上传

function uploadImg (formData) {

    const xhr = new XMLHttpRequest();

    // 进度监听

    xhr.upload.addEventListener('progress', (e)=>{

        console.log(e, e.loaded , e.total); // 可以利用这两个对象算出目前的传输比例

    }, false);

    xhr.onreadystatechange = function () {

        if (xhr.readyState === 4) {

            const result = JSON.parse(xhr.responseText);

            if (xhr.status === 200) {

                // 上传成功

                console.log(result);

            } else {

                // 上传失败

            }

        }

    };

    xhr.open('POST', '/upload' , true); // 中间"/upload"为后台上传地址(如果需要兼容性强可以使用限制的ajax库)

    xhr.send(formData); // 发送到后台

}

代码github访问地址：上传实例代码

小结

通过本节内容，我们应该彻底的理解了前端上传是如何实现的，给出的代码实例虽然简单，但是已经是非常核心，我们可以通过这个版本去实现一个非常复杂的需求，譬如多图片上传，那么也就是遍历的调用transformFileToDataUrl这个方法去实现。在例如添加上拖拽文件到指定区域去上传，那么我们只需要了解下drag对象就可以很轻松的实现了。

码农公寓

目前实现上传的方式

浏览器小于等于IE9(低版本浏览器)使用下面的方式实现的

主流浏览器 + IE10+ 则是通过以下方式实现的上传

FormData介绍

XMLHttpRequest简介

FileReader

form表单上传

FormData + XHR2 + FileReader + canvas

小结

相关文章