首先祝大家端午节快乐！事业和家庭更上一层楼。 ！

最近遇到一个100M大文件的上传需求，研究了七牛和腾讯云的分片分片上传功能。所以这里整理了前端大文件上传相关功能的实现。

在一些业务中，上传大文件是一个比较重要的交互场景，比如导入库比较大的表数据，上传视频音频文件等等。如果文件比较大，或者网络条件不好，上传时间会比较长（需要传输的包比较多，丢包重传的概率也比较大），用户无法刷新页面，只能耐心等待请求完成。 .

下面先从文件上传方法说起，整理上传大文件的思路，并给出相关示例代码。由于PHP内置了方便的文件拆分和拼接方法，所以服务器端代码都是用PHP编写的。

上传文件的几种方式

首先，我们来看看上传文件的几种方式。

普通表单上传

使用 PHP 显示常规表单上传是一个不错的选择。首先构建一个用于文件上传的表单，并将表单的提交内容类型指定为“/form-data”，表示该表单需要上传二进制数据。

然后编写.php上传文件接收代码，使用方法（php大法好...）

$imgName = 'IMG'.time().'.'.str_replace('image/','',$_FILES["myfile"]['type']);

$fileName = 'upload/'.$imgName;

// 移动上传文件至指定upload文件夹下，并根据返回值判断操作是否成功

if (move_uploaded_file($_FILES['myfile']['tmp_name'], $fileName)){

 echo $fileName;

}else {

 echo "nonn";

}

在表单上传大文件时，很容易遇到服务器超时的问题。通过xhr，前端也可以异步上传文件。一般有两种思路。

文件编码上传

第一个想法是对文件进行编码php上传多张图片代码，然后在服务器上对其进行解码。主要实现原理是将图片转换为传输。

var imgURL = URL.createObjectURL(file);

ctx.drawImage(imgURL, 0, 0);

// 获取图片的编码，然后将图片当做是一个很长的字符串进行传递

var data = canvas.toDataURL("image/jpeg", 0.5);

服务器端需要做的比较简单，先解码再保存图片

$imgData = $_REQUEST['imgData'];

$base64 = explode(',', $imgData)[1];

$img = base64_decode($base64);

$url = './test.jpg';

if (file_put_contents($url, $img)) {

 exit(json_encode(array(

 url => $url

 )));

}

编码的缺点是它的体积比原图大（因为三个字节转换成四个字节，编码后的文字会比原图大三分之一左右），对于体积。对于大文件，上传和解析时间会显着增加。

除了编码之外，还可以在前端直接读取文件内容后以二进制格式上传

// 读取二进制文件

function readBinary(text){

 var data = new ArrayBuffer(text.length);

 var ui8a = new Uint8Array(data, 0);

 for (var i = 0; i < text.length; i++){ 

 ui8a[i] = (text.charCodeAt(i) & 0xff);

 }

 console.log(ui8a)

}

var reader = new FileReader();

reader.onload = function(){

readBinary(this.result) // 读取result或直接上传

}

// 把从input里读取的文件内容，放到fileReader的result字段里

reader.readAsBinaryString(file);

异步上传

主要用于组装一组用于发送请求的键/值对，可以更灵活的发送Ajax请求。可用于模拟表单提交。

let files = e.target.files // 获取input的file对象

let formData = new FormData();

formData.append('file', file);

axios.post(url, formData);

服务端处理方式与直接表单请求基本相同。

没有页面刷新

在低版本浏览器（如IE）上，xhr不支持直接上传，所以只能使用form上传文件，而form提交本身会进行页面跳转，这是由form的属性造成的形式。 ，其值为

如果需要让用户体验异步上传文件的感觉，可以指定。将表单的属性设置为不可见，则返回的数据将被此接受网站模板，