thinkphp集成webuploader实战

介绍

最近用了下thinkphp搞自己的博客，期间用到了百度的webuploader上传图片。百度出来的参考质量一言难尽，写教程没有一点追求，千篇一律的复制粘贴，某些个作者自己都没搞清楚就发文，误人又误己，特此记录方便自己查阅的同时让大家少走弯路，看这一篇和官方文档足以。

• 参考文档

http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_removeFile

https://www.kancloud.cn/manual/thinkphp5/155159

效果演示

写教程不上图的都是耍流氓：）

开发步骤

注意：此处演示的是单文件上传，如果要多文件的话去掉配置项中的fileNumLimit。

引入必要的资源

<link href="__STATIC__/common/plugin/webuploader/webuploader.css" rel="stylesheet">
<link href="__STATIC__/common/plugin/webuploader/style.css" rel="stylesheet">
<script src="__STATIC__/common/plugin/webuploader/webuploader.min.js"></script>

添加表单

<div id="uploader-demo" style="margin-top: 10px;">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list">
    </div>
    <input type="hidden" id="img_input" name="file_image" value="">
    <button onclick="chooseImg(this)" class="btn btn-success" type="button">选择图片</button>
    <div id="picker">上传图片</div>

</div>

js脚本

// 缩略图上传
var $list=$("#fileList");
var thumbnailWidth = 150;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 150;
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: '/static/common/plugin/webuploader/uploader.swf', //加载swf文件，路径一定要对
    // 文件接收服务端。
    server: hdjs.uploader,
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',
    fileNumLimit: 1, // 单文件上传
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/'
    },
    //需要图片压缩则加入以下参数
    compress:{
        width: 700,
        //height: 900,
        // 图片质量，只有type为`image/jpeg`的时候才有效。
        quality: 90,
        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
        allowMagnify: false,
        // 是否允许裁剪。
        crop: false,
        // 是否保留头部meta信息。
        preserveHeaders: true,
        // 如果发现压缩后文件大小比原来还大，则使用原来图片
        // 此属性可能会影响图片自动纠正功能
        noCompressIfLarger: false,
        // 单位字节，如果图片大小小于此值，不会采用压缩。
        compressSize: 1024
    }
});
//上传完成事件监听
uploader.on( 'fileQueued', function(file) {
    var $li = $(
        //'<div id="' + file.id + '" class="file-item thumbnail">' +
        '<div id="WU_FILE_0" class="file-item thumbnail">' +
        '<img>' +
        '<div class="info">' + file.name + '</div>' +
        '<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" οnclick="removeImg(this)">×</em>'+
        '</div>'
        ),
        $img = $li.find('img');
    // $list为容器jQuery实例
    $list.append( $li );
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});
// 文件上传成功
uploader.on('uploadSuccess', function(file,ret){
    console.log(ret);
    $('#arc_thumb').val(ret.saved_path);
});

• 下面是移除图片的函数

function removeImg(obj) {
    uploader.removeFile( 'WU_FILE_0' );
    $('#WU_FILE_0').remove();
    $('#arc_thumb').val('');
}

thinkphp上传代码

//上传文件
public function uploader ()
{

	// 获取表单上传文件 例如上传了001.jpg
	$file = request()->file( 'file' );
	// 移动到框架应用根目录/public/uploads/ 目录下
	$info = $file->move( ROOT_PATH . 'public' . DS . 'uploads' );
	//halt($info);
	if ( $info ) {
	    // 对windows下反斜线转换为正斜线
           $saved_name = str_replace("\\","/",$info->getSaveName());
		$data = [
			'name'       => input( 'post.name' ) ,
			'filename'   => $info->getFilename() ,
			'path'       => 'uploads/' . $saved_name,
			'extension'  => $info->getExtension() ,
			'createtime' => time() ,
			'size'       => $info->getSize(),
		];
		Db::name( 'attachment' )->insert( $data );
		echo json_encode( [ 'valid' => 1 , 'message' => CONTEXT_PATH . 'uploads/' . $saved_name ,'saved_path'=> $saved_name] );
	}
	else {
		// 上传失败获取错误信息
		echo json_encode( [ 'valid' => 0 , 'message' => $file->getError() ] );
	}
}