muhimel/fileuploader

文件上传项目

安装: 66

依赖: 1

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:JavaScript

dev-master 2019-07-31 11:56 UTC

This package is auto-updated.

Last update: 2024-09-29 05:55:25 UTC


README

这是一个简单的文件上传应用程序

要求

PHP >= 5.3.2

Vue Js v2

Axios JS

使用方法

对于 CakePHP

从项目根目录打开 composer.json 并添加以下行

require:{
  "muhimel/fileuploader":"v1.1.1.0-dev"
}

从终端运行以下命令(从项目根目录)

composer update

或者

composer require --dev muhimel/fileuploader "v1.1.1.0-dev"
// recommanded to use this command so composer will only install this library
// will not update other library used in the project

从 vendor/muhimel/fileuploader/src 复制 assets 目录。在 webroot 下创建一个名为 (uploader) 的目录并将 assets 目录粘贴到该目录下

创建一个插件名称(例如 FileUpload)

现在在 FileUpload 插件内创建 UploadController

确保您添加以下命名空间

use Muhimel\Uploader;
use Muhimel\Helper\HtmlHelper;
use Muhimel\Interfaces\UploaderInterface;

现在在 UploadController 内创建 index 方法并写入以下代码,控制器应实现 UploaderInterface 接口;

public function index($category,$accept,$suffix=null,$selectionType="single"){
    
    // change base url

	$baseUrl = 'https:///appname/';
	HtmlHelper::setAssetPath($baseUrl.'uploader/assets/');
	HtmlHelper::setAsset('css/bootstrap.min.css');
		   
	HtmlHelper::setAsset('js/vue/vue.js');
	HtmlHelper::setAsset('js/axios/axios.min.js');

	Uploader::getUI([
		'base_url'=> $baseUrl,
		'upload_url'=>'file-upload/upload/process/'.$category.(!empty($suffix)? '/'.$suffix : ''),
				'csrf_token'=> $this->request->param('_csrfToken'),
				'uploader-object' => null, //optional
				'selection-type' => $selectionType,
				'accept'=> $accept // use document to allow (.docx,.xlsx,.pptx,pdf) or use images to allow (.png,.jpg,.bmp,.gif)
	]);
}

现在在 UploadController 内写入 process 方法

public function process($category,$suffix=null)
{
	$this->category = $category;
	
    // you can modify suffix here as your need


	if($this->request->allowMethod(['post'])){
		$targetDir = $_SERVER['DOCUMENT_ROOT'].$this->request->webroot.'webroot/uploads/'.((!empty($suffix))? $suffix.'/' : '');
		Uploader::setOptions(['target_dir'=>$targetDir]);
		Uploader::upload($this);
	}
	exit;
}

在 UploadController 内写入以下 2 个监听器方法

public function beforeUpload(&$file)
{
    // file upload error checking and error message

    if(empty($file)){
        echo json_encode(array(
            'code'=>400,
            'message'=> 'Sorry! file not selected'
        ));
        exit;
    }

    if($file['size'] > (5*(1024*1024))){
        echo json_encode(array(
            'code'=>400,
            'message'=> 'Sorry! File size should not greater than 5Mb'
        ));
        exit;
    }

    // setting  file name and file original name 
    $file['original_filename'] = $file['name'];
    $file['name'] = $this->category.'-'.md5(microtime(true)).substr($file['name'],strrpos($file['name'],'.'));
    
    
}

public function afterUpload($file)
{
    // custom project specific code
    $uploadDir = explode('/',substr($file['uploadDir'],0,strlen($file['uploadDir'])-1));
    
    $lastFolderName = array_pop($uploadDir);
    $lastFolder = null;
    
    try{
        
        $uaFileFoldersRepo = TableRegistry::get('FileUpload.UaFileFolders');
        $lastFolder = $uaFileFoldersRepo->find('all')->where(['name'=>$lastFolderName])->first();
        
        if(!empty($lastFolder)){
            $uaFilesRepo = TableRegistry::get('FileUpload.UaFiles');
            $uaFile = $uaFilesRepo->newEntity();
            $uaFile->user_id = $this->logged_user_id;
            $uaFile->ua_file_folder_id = $lastFolder->id;
            $uaFile->file_name = $file['name'];
            $uaFile->file_orginal_name = $file['original_filename'];
            $uaFile->type = $file['type'];
            $uaFile->extension = substr($file['name'],(strrpos($file['name'],'.')+1),strlen($file['name']));
            $uaFile->file_size = $file['size'];
            $file['file']=$uaFile;
            $file['folder_id'] = $lastFolder->id;
            if(!$uaFilesRepo->save($uaFile)){
                $file['file_insert_error'] = $uaFile->errors();
            }
        }
    
    }catch(\Exception $ex){

        $file['error_message'] = $ex->getMessage();
        echo json_encode(array(
            'code'=>400,
            'uploaded' => $file
        ));
        exit;
    }

    // end of custom project specific code
    
    // this method should response like following

    echo json_encode(array(
        'code'=>200,
        'uploaded' => $file
    ));
    exit;
}

现在在您想添加上传器的页面上写入以下 HTML 标签和属性

<div id="root">
	<uploader style="margin-top:6px;" 
	    :btncss="'btn btn-default btn-success'" 
	    :btnname="'Button Name'" 
	    :route="'file-upload/upload" 
	    :dir="'default'" 
	    :accept="'images'" 
	    :category="'category-name'" 
	    :uploadedfiles="handleUploader"
	    :selectiontype="'single'">
	</uploader>
</div>

确保您在 webroot/js/ 或 plugins/pluginname/webroot/js/ 下有 uploader.js 文件,并且确保在您的 pagewise custom.js 方法部分有以下方法

handleUploader:function(uploadedFiles){
    // all uploaded file information will be available in uploadedFiles array
    // handle your own code here 
}