我尝试创建一个脚本来上传大文件，我通过Ajax发送数据（这是可行的），但这并不能解决大文件的问题，在最佳情况下，我只能上传100 MB，这是对用户不利，您能帮助我添加压缩文件上传吗，谢谢
这是我的 HTML ：
<form id="upload_form" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="file" id="file-7" class="inputfile inputfile-6" />
<center>
<a href="#" id="star_up" value="hide/show">
<input class="btn btn-info btn-lg wow tada" id="sell_house_submit" type="submit" name="upload_file" value="@lang('lang.UPLOAD')">
</a>
</center>
<div id="prog" style="display:none;">
<progress id="progressBar" class="wow tada" style="@if(isMobile())width:200px;@else width:750px;@endif height: 10px;" value="0" max="100">
</progress>
<h3 class="av" id="status" ></h3>
<p id="loaded_n_total" ></p>
我的 javascript ：
$(document).ready(function(){
$('#upload_form').on('submit', function(event){
$.ajax({
url:"{{ route('upload') }}",
method:"POST",
data: new FormData(this),
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progressHandler, false);
myXhr.addEventListener("load", completeHandler, false);
myXhr.addEventListener("error", errorHandler, false);
myXhr.addEventListener("abort", abortHandler, false);
}
return myXhr;
},
dataType:'JSON',
contentType: false,
cache: false,
processData: false,
// IF SUCCESS
success:function(data)
{
if (data.type_is == 'swal') {
swal({
title: data.title,
html: data.html,
showCloseButton: true,
focusConfirm: false,
type: data.status
});
jQuery('#progress_up').toggle('hide');
document.getElementById('file-7').value = '';
document.getElementById('name_file').innerHTML = '';
}
}
})
event.preventDefault();
});
});
控制器：
protected function upload(Request $request) {
ini_set('max_execution_time', 3000);
ini_set('memory_limit','256M');
// UPLOAD FILE
if (getValue('storage_type', 'disk') == 's3') {
$path = Storage::disk('s3')->putFile('files', $request->file('file'));
$storage = 's3';
} else {
$path = Storage::putFile('files', $request->file('file'));
$storage = 'disk';
}
// RANDOM
$link_id = Random();
$delete_token = Random(50);
$preview = Random(10);
$ip = getip();
$this->createFile($name, $path, $link_id, $delete_token, $ip, $preview, $size, $mime, $type, $storage);
// FILE UPLOADED
return response()->json([
'title' => trans('lang.GREAT'),
'html' => getFileInfoHTML($link_id, $delete_token, $name, $type, $preview),
'type_is' => 'swal',
'status' => 'success'
]);
}
我只放了最重要的东西，我没有放文件查看和大小的详细信息..，我只想知道如何添加属性并上传文件而没有大RAM < / strong>：）
答案 0 :(得分：1)
1。安装pion / laravel-chunk-upload
composer require pion/laravel-chunk-upload
\Pion\Laravel\ChunkUpload\Providers\ChunkUploadServiceProvider::class
php artisan vendor:publish --provider="Pion\Laravel\ChunkUpload\Providers\ChunkUploadServiceProvider"
2。添加路线
Route::post('/upload', 'UploadController@upload');
3。添加视图和脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
<script>
var $ = window.$; // use the global jQuery instance
var $fileUpload = $('#resumable-browse');
var $fileUploadDrop = $('#resumable-drop');
var $uploadList = $("#file-upload-list");
if ($fileUpload.length > 0 && $fileUploadDrop.length > 0) {
var resumable = new Resumable({
// Use chunk size that is smaller than your maximum limit due a resumable issue
// https://github.com/23/resumable.js/issues/51
chunkSize: 1 * 1024 * 1024, // 1MB
simultaneousUploads: 3,
testChunks: false,
throttleProgressCallbacks: 1,
// Get the url from data-url tag
target: $fileUpload.data('url'),
// Append token to the request - required for web routes
query:{_token : $('input[name=_token]').val()}
});
// Resumable.js isn't supported, fall back on a different method
if (!resumable.support) {
$('#resumable-error').show();
} else {
// Show a place for dropping/selecting files
$fileUploadDrop.show();
resumable.assignDrop($fileUpload[0]);
resumable.assignBrowse($fileUploadDrop[0]);
// Handle file add event
resumable.on('fileAdded', function (file) {
// Show progress pabr
$uploadList.show();
// Show pause, hide resume
$('.resumable-progress .progress-resume-link').hide();
$('.resumable-progress .progress-pause-link').show();
// Add the file to the list
$uploadList.append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);
// Actually start the upload
resumable.upload();
});
resumable.on('fileSuccess', function (file, message) {
// Reflect that the file upload has completed
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(completed)');
});
resumable.on('fileError', function (file, message) {
// Reflect that the file upload has resulted in error
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html('(file could not be uploaded: ' + message + ')');
});
resumable.on('fileProgress', function (file) {
// Handle progress for both the file and the overall upload
$('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-progress').html(Math.floor(file.progress() * 100) + '%');
$('.progress-bar').css({width: Math.floor(resumable.progress() * 100) + '%'});
});
}
}
</script>
<div class="text-center" >
<div id="resumable-error" style="display: none">
Resumable not supported
</div>
<div id="resumable-drop" style="display: none">
<p><button id="resumable-browse" data-url="{{ url('upload') }}" >Upload</button> or drop here
</p>
<p></p>
</div>
<ul id="file-upload-list" class="list-unstyled" style="display: none">
</ul>
<br/>
</div>
4。在您的UploadController中，
<?php
namespace App\Http\Controllers;
use Storage;
use Illuminate\Http\Request;
use Illuminate\Http\UploadedFile;
use Pion\Laravel\ChunkUpload\Exceptions\UploadMissingFileException;
use Pion\Laravel\ChunkUpload\Handler\AbstractHandler;
use Pion\Laravel\ChunkUpload\Handler\HandlerFactory;
use Pion\Laravel\ChunkUpload\Receiver\FileReceiver;
class UploadController extends Controller
{
/**
* Handles the file upload
*
* @param Request $request
*
* @return \Illuminate\Http\JsonResponse
*
* @throws UploadMissingFileException
* @throws \Pion\Laravel\ChunkUpload\Exceptions\UploadFailedException
*/
public function upload(Request $request) {
// create the file receiver
$receiver = new FileReceiver("file", $request, HandlerFactory::classFromRequest($request));
// check if the upload is success, throw exception or return response you need
if ($receiver->isUploaded() === false) {
throw new UploadMissingFileException();
}
// receive the file
$save = $receiver->receive();
// check if the upload has finished (in chunk mode it will send smaller files)
if ($save->isFinished()) {
// save the file and return any response you need, current example uses `move` function. If you are
// not using move, you need to manually delete the file by unlink($save->getFile()->getPathname())
return $this->saveFile($save->getFile());
}
// we are in chunk mode, lets send the current progress
/** @var AbstractHandler $handler */
$handler = $save->handler();
return response()->json([
"done" => $handler->getPercentageDone(),
'status' => true
]);
}
/**
* Saves the file to S3 server
*
* @param UploadedFile $file
*
* @return \Illuminate\Http\JsonResponse
*/
protected function saveFileToS3($file)
{
$fileName = $this->createFilename($file);
$disk = Storage::disk('s3');
// It's better to use streaming Streaming (laravel 5.4+)
$disk->putFileAs('photos', $file, $fileName);
// for older laravel
// $disk->put($fileName, file_get_contents($file), 'public');
$mime = str_replace('/', '-', $file->getMimeType());
// We need to delete the file when uploaded to s3
unlink($file->getPathname());
return response()->json([
'path' => $disk->url($fileName),
'name' => $fileName,
'mime_type' =>$mime
]);
}
/**
* Saves the file
*
* @param UploadedFile $file
*
* @return \Illuminate\Http\JsonResponse
*/
protected function saveFile(UploadedFile $file)
{
$fileName = $this->createFilename($file);
// Group files by mime type
$mime = str_replace('/', '-', $file->getMimeType());
// Group files by the date (week
$dateFolder = date("Y-m-W");
// Build the file path
$filePath = "upload/{$mime}/{$dateFolder}/";
$finalPath = storage_path("app/".$filePath);
// move the file name
$file->move($finalPath, $fileName);
return response()->json([
'path' => $filePath,
'name' => $fileName,
'mime_type' => $mime
]);
}
/**
* Create unique filename for uploaded file
* @param UploadedFile $file
* @return string
*/
protected function createFilename(UploadedFile $file)
{
$extension = $file->getClientOriginalExtension();
$filename = str_replace(".".$extension, "", $file->getClientOriginalName()); // Filename without extension
// Add timestamp hash to name of the file
$filename .= "_" . md5(time()) . "." . $extension;
return $filename;
}
}