3

我正在尝试使用带有 pion/laravel-chunk-upload 的 resumable.js 将 400MB 以上的文件上传到服务器。它允许我上传较小的文件，没有任何错误，但是当我尝试上传 400MB 的文件时，它就失败了。

服务器端代码：

$receiver = new FileReceiver("file", $request, HandlerFactory::classFromRequest($request));
    if ($receiver->isUploaded() === false) {
        throw new UploadMissingFileException();
    }
    $save = $receiver->receive();

    // check if the upload has finished (in chunk mode it will send smaller files)
    if ($save->isFinished()) {
        return $this->saveFile($save->getFile());
    }
    $handler = $save->handler();

    return response()->json([
        "done" => $handler->getPercentageDone(),
    ]);

saveFile 方法将保存文件并返回一个数组，我在 vue.js 中使用该数组来显示该文件已上传。

服务器配置：

PHP 7.3.15-3+ubuntu18.04.1，nginx

JS端代码：

var vm = this;
     var $fileUpload = $('#resumable-browse');
     var $fileUploadDrop = $('#resumable-drop');

     if ($fileUpload.length > 0 && $fileUploadDrop.length > 0) {
      vm.uploader.resumable = new Resumable({
           chunkSize: 10 * 1024 * 1024, // 10MB
           simultaneousUploads: 1,
           testChunks: false,
           throttleProgressCallbacks: 1,
           // Get the url from data-url tag
           target: '/api/media',
           withCredentials : true,
           headers : { "X-CSRF-TOKEN": document.head.querySelector('meta[name="csrf-token"]').content },
        });

        if (!vm.uploader.resumable.support) {
           vm.uploader.isSupported = false;
        } 
        else {
           vm.uploader.initialized = true;
           vm.uploader.resumable.assignDrop($fileUploadDrop[0]);
           vm.uploader.resumable.assignBrowse($fileUploadDrop[0]);
           vm.uploader.resumable.on('fileAdded', vm.fileAdded);
           vm.uploader.resumable.on('fileSuccess', vm.fileSuccess);
           vm.uploader.resumable.on('fileError', vm.fileError);
        }
     }

fileSuccess(file, message) {
         let vm = this;
         let response = JSON.parse(message);
         // setting the value of s3 url and mux url for copy to clipboard
         if(response.uploadedMedia.file_type == "Videos")
         {
           file.mux_url = response.uploadedMedia.mux_url;
           file.file_type = "Videos";
         }
         else {
           file.s3_url = response.uploadedMedia.s3_url;
           file.file_type = "OtherThanVideoFile";
         }
         // setting the status message after upload success 
         let fileResponseMessage = response.uploadedMedia.status;
         if(fileResponseMessage == 'Completed') {
           file.fileUploadMessage = 'Success';
         }
         else if(fileResponseMessage == 'Processing') { 
           file.fileUploadMessage = 'The file is queued for processing'; 
         }
         else if(fileResponseMessage == 'Error') {
           file.fileUploadMessage = 'Failed';
         }
         //  special case for video setting the status message after upload success
         if(response.uploadedMedia.file_type == "Videos") { file.fileUploadMessage = 'The file is queued for processing'; }

         if(!response.is_success) {
           vm.$alert(response.errorMessage);
         }   
        //vm.uploader.resumable.removeFile(file)
        vm.loadMedia(1);
      }

我做的调试：

我已经检查并且块将进入服务器端并被存储，但是当服务器接收到最后一个块时，isFinished() 方法没有被调用，因此我的 vue.js 中出现错误。

在 resumable.js 的 fileSuccess 事件中，我正在调用一个函数 fileSuccess(file, message) ，在此我试图从服务器读取 saveFile() 方法返回的属性。最后一个块上传到服务器后，我得到返回为“{“done”：97}”，但我应该从服务器获得 saveFile 方法的返回。

我在这里想念什么？

4

0 回答 0