dcat-admin 富文本(tinymce)上传图片如何实现分片(分块)上传
nginx和php默认配置均是最大请求大小为512KB,涉及到图片、视频等文件上传均使用了框架自带的分块上传:
$form->image('logo', 'logo')->uniqueName()->move('/logo')->threads(2)->chunkSize(512)->maxSize(1024*2);
查看文档,编辑器上传文件的配置默认是跟着后台上传配置(admin)走的,默认的编辑器无法上传视频(没有打开),根据这篇文章的配置:
Dcat Admin Editor富文本 添加视频本地上传
在app/Admin/bootstrap.php
中加入:
use Dcat\Admin\Form;
Form\Field\Editor::resolving(function (Form\Field\Editor $editor) {
$editor->options([
'file_picker_types' => 'media',
'file_picker_callback' => \Dcat\Admin\Support\JavaScript::make(<<<JS
function file_picker_callback (callback, value, meta) {
// 设置上传地址为原富文本框图片文件上传地址
var upurl = opts.images_upload_url;
var filetype = '';
// 处理媒体类型文件能选择的文件类型
if (meta.filetype == 'media') {
filetype = '.mp4,.webm,.ogg'
}
//模拟出一个input用于添加本地文件
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
// 模拟点击file input
input.click();
input.onchange = function() {
// 文件选择后进行上传
var file = this.files[0];
var xhr, formData;
console.log(file.name);
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', upurl);
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
callback(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );
xhr.send(formData);
}
}
JS)
]);
});
查看中文文档:
简介与入门 \ 上传图片和文件
可以看到需要自定义上传类型的话需要在file_picker_types
里写,于是就想着从这里入手或者重新自定义一个上传方法。但是文档也没有现成的配置和案例。
查了一圈前端的上传大文件的办法,都是循环每次上传固定大小,然后当总上传量大于等于当前文件的时候,就判断为上传成功,然后合并文件。
请问一下这个思路是OK的还是有更简洁的方式?