修正文件浏览bug

This commit is contained in:
乐风 2021-05-14 09:05:21 +08:00
parent 6e59a7dd41
commit 2f05787f14
7 changed files with 92 additions and 57 deletions

View File

@ -2033,7 +2033,7 @@ class Form
$value = join(",", $value);
break;
case 'images':
$value = join("\n", (array)$value);
$value = join(",", (array)$value);
break;
case 'date':
if ($setting['save'] == 'u') {

View File

@ -1461,7 +1461,7 @@ class FieldService
<input type="hidden" value="" name="' .$name. '[]" />
</div>';
} else {
$srcs = explode("\n", $content);
$srcs = explode(",", $content);
foreach($srcs as $src) {
$items .= '<div class="media-item">
<img class="img-responsive img-thumbnail" src="'.url('uploads/'.$src).'" />

View File

@ -26,7 +26,8 @@ class MediaController extends DefaultController
if ($file->isValid() && $v->passes()) {
// 获取上传uri第一个目录
$path = 'media/'.date('Y/m');
$upload_path = upload_path().'/'.$path;
$upload_path = upload_path();
$file_path = $upload_path.'/'.$path;
// 文件后缀名
$extension = $file->getClientOriginalExtension();
@ -39,7 +40,7 @@ class MediaController extends DefaultController
$mimeType = $file->getMimeType();
$filesize = $file->getSize();
if ($file->move($upload_path, $filename)) {
if ($file->move($file_path, $filename)) {
$data = [
'name' => mb_strtolower($file->getClientOriginalName()),
'path' => $path.'/'.$filename,
@ -49,9 +50,13 @@ class MediaController extends DefaultController
];
if (in_array($mimeType, $fileTypes)) {
$path = pathinfo($path.'/'.$filename);
$thumb = $path['dirname'].'/'. image_thumb($upload_path.'/'.$filename, 750);
$data['thumb'] = $thumb;
// 生成缩略图图片小于750px就不生成了
$thumb = $path. '/thumb_' . $filename;
if (image_thumb($file_path.'/'.$filename, $upload_path.'/'.$thumb, 750)) {
$data['thumb'] = $thumb;
} else {
$data['thumb'] = $path.'/'.$filename;
}
}
$id = Media::insertGetId($data);
@ -85,17 +90,11 @@ class MediaController extends DefaultController
$rows = $model->orderBy('id', 'desc')->get()->toArray();
foreach($rows as &$row) {
if (in_array($row['type'], ['png', 'jpg', 'jpeg'])) {
$file = $row['path'];
$path = pathinfo($file);
$thumb = $path['dirname'].'/t750_'.$path['basename'];
if (!is_file(upload_path().'/'.$thumb)) {
image_thumb(upload_path().'/'.$file, 750);
if (empty($row['thumb'])) {
$row['thumb'] = $row['path'];
}
$row['path'] = $file;
$row['thumb'] = $thumb;
}
}
return $this->json($rows, true);
}
return $this->render();
@ -106,13 +105,19 @@ class MediaController extends DefaultController
*/
public function folder()
{
$gets = Request::all();
if (Request::method() == 'POST') {
$gets = Request::all();
$gets['folder'] = 1;
Media::insertGetId($gets);
if (empty($gets['name'])) {
return $this->json('名称不能为空。');
}
$model = Media::findOrNew($gets['id']);
$model->folder = 1;
$model->name = $gets['name'];
$model->save();
return $this->json('操作成功', true);
}
return $this->render();
$folder = Media::where('id', $gets['id'])->first();
return $this->render(['folder' => $folder]);
}
/**
@ -134,18 +139,37 @@ class MediaController extends DefaultController
public function delete()
{
$id = (array)Request::get('id');
$folder = Request::get('folder');
if (empty($id)) {
return $this->json('删除失败');
return $this->json('删除失败。');
}
// 判断删除的文件夹是否有文件
if ($folder) {
$count = Media::whereIn('folder_id', $id)->count();
if ($count) {
return $this->json('文件夹不为空,删除失败。');
}
}
$rows = Media::whereIn('id', $id)->get();
foreach ($rows as $row) {
// 删除原文件
$file = upload_path().'/'.$row['path'];
if (is_file($file)) {
unlink($file);
}
// 删除缩略图
if ($row['thumb']) {
$thumb = upload_path().'/'.$row['thumb'];
if (is_file($thumb)) {
unlink($thumb);
}
}
}
Media::whereIn('id', $id)->delete();
return $this->json('删除成功', true);
return $this->json('删除成功。', true);
}
}
}

View File

@ -123,7 +123,7 @@
</style>
@verbatim
<div id="vue-app">
<div id="file-browser">
<div class="media-controller">
<div class="media-tool">
<div class="pull-right">
@ -134,7 +134,7 @@
<button class="btn btn-danger btn-sm"><i class="fa fa-times"></i> 删除文件</button>
-->
</div>
<a @click="folder" class="btn btn-sm btn-default"><i class="fa fa-plus"></i> 添加文件夹</a>
<a @click="folder(0)" class="btn btn-sm btn-default"><i class="fa fa-plus"></i> 添加文件夹</a>
<div class="clearfix"></div>
</div>
<div id="media-navigator">
@ -146,9 +146,7 @@
</li>
<li v-bind:class="{active:folderId == item.id}" v-for="(item, index) in folders" :key="item.id">
<span class="pull-right folder-tool">
<!--
<a class="hinted" title="修改"><i class="fa fa-pencil"></i></a>
-->
<a @click="folder(item.id)" class="hinted" title="修改"><i class="fa fa-pencil"></i></a>
<a @click="onDelete(index, 1)" class="hinted" title="删除"><i class="fa fa-times"></i></a>
</span>
<a @click="onFolder(item.id)" class="node"><i class="fa fa-folder-o"></i> {{item.name}}</a>
@ -231,22 +229,27 @@ var vueApp = Vue.createApp({
download: function(id) {
return app.url('system/media/download', {id: id});
},
folder: function() {
folder: function(id) {
let me = this;
$.dialog({
title: '文件夹管理',
url: app.url('system/media/folder'),
dialogClass: 'modal-md',
title: '文件夹',
url: app.url('system/media/folder', {id: id}),
dialogClass: 'modal-sm',
buttons: [{
text: '提交',
'class': 'btn-success',
text: '保存',
'class': 'btn-info',
click: function() {
let modal = this;
let form = $('#myfolder').serialize();
axios.post(app.url('system/media/folder'), form)
.then(function(response) {
me.getMedia(1, 0);
$(modal).dialog('close');
let res = response.data;
if (res.status) {
me.getMedia(1, 0);
$(modal).dialog('close');
} else {
toastrError(res.data);
}
}).catch(function(error) {
console.log(error);
});
@ -282,11 +285,17 @@ var vueApp = Vue.createApp({
if (btn == true) {
axios.post(app.url('system/media/delete'), {
id: [id],
folder: folder,
}).then(function(response) {
if (folder) {
me.folders.splice(index, 1);
let res = response.data;
if (res.status) {
if (folder) {
me.folders.splice(index, 1);
} else {
me.files.splice(index, 1);
}
} else {
me.files.splice(index, 1);
toastrError(res.data);
}
}).catch(function(error) {
console.log(error);
@ -313,8 +322,11 @@ var vueApp = Vue.createApp({
},
}).then(function(response) {
let res = response.data;
me.files.unshift(res.data);
console.log(res.data);
if (res.status) {
me.files.unshift(res.data);
} else {
toastrError(res.data);
}
})
.catch(function(error) {
console.log(error);
@ -323,7 +335,7 @@ var vueApp = Vue.createApp({
}
}
});
var vm = vueApp.mount('#vue-app');
var vm = vueApp.mount('#file-browser');
function saveMedia(params) {
var files =[];
@ -341,12 +353,12 @@ function saveMedia(params) {
if (params['multi'] == 0) {
let file = files[0];
var name = params['name'];
media.append('<div class="media-item"><input type="hidden" value="' + file.path + '" name="' + name + '" /><img class="img-responsive img-thumbnail" src="'+ app.url('uploads/' + file.path) +'" /><a class="close" title="删除这张图片" data-toggle="media-delete">×</a></div>');
media.append('<div class="media-item"><input type="hidden" value="' + file.path + '" name="' + name + '" /><img class="img-responsive img-thumbnail" src="'+ app.url('uploads/' + file.thumb) +'" /><a class="close" title="删除这张图片" data-toggle="media-delete">×</a></div>');
} else {
var name = params['name'] + '[]';
for (var i = 0; i < files.length; i++) {
let file = files[i];
media.append('<div class="media-item"><input type="hidden" value="' + file.path + '" name="' + name + '" /><img class="img-responsive img-thumbnail" src="'+ app.url('uploads/' + file.path) +'" /><a class="close" title="删除这张图片" data-toggle="media-delete">×</a></div>');
media.append('<div class="media-item"><input type="hidden" value="' + file.path + '" name="' + name + '" /><img class="img-responsive img-thumbnail" src="'+ app.url('uploads/' + file.thumb) +'" /><a class="close" title="删除这张图片" data-toggle="media-delete">×</a></div>');
}
}
}

View File

@ -1,8 +1,9 @@
<form class="form-horizontal form-controller" action="{{url()}}" method="post" id="myfolder" name="myfolder">
<div class="form-group no-border">
<label class="col-sm-2 control-label"><span class="red">*</span> 文件夹名称</label>
<div class="form-group">
<label class="col-sm-2 control-label" style="border-top:0;"><span class="red">*</span> 名称</label>
<div class="col-sm-10 control-text">
<input type="text" value="" required="required" class="form-control input-sm" autocomplete="off" name="name">
<input type="text" value="{{$folder['name']}}" required="required" placeholder="请输入文件夹名称" class="form-control input-sm" autocomplete="off" name="name">
<input type="hidden" value="{{$folder['id']}}" name="id">
</div>
</div>
</form>

View File

@ -507,12 +507,10 @@ function authorise($action = null, $asset_name = null)
/**
* 生成缩略图
*/
function image_thumb($file, $width = 750)
function image_thumb($file, $thumb_file, $width = 750)
{
$info = pathinfo($file);
$thumb = $info['dirname'] . '/t' . $width . '_' . $info['basename'];
if (is_file($thumb)) {
return 't' . $width . '_' . $info['basename'];
if (is_file($thumb_file)) {
return true;
}
if (is_file($file)) {
@ -522,7 +520,6 @@ function image_thumb($file, $width = 750)
$type = $temp[2];
if ($srcw > $width) {
// 1=gif 2=jpg 3=png
switch ($type) {
case 1:
$image = imagecreatefromgif($file);
@ -555,21 +552,21 @@ function image_thumb($file, $width = 750)
switch ($type) {
case 1:
imagegif($dest, $thumb);
imagegif($dest, $thumb_file);
break;
case 2:
imagejpeg($dest, $thumb, 75);
imagejpeg($dest, $thumb_file, 75);
break;
case 3:
imagepng($dest, $thumb);
imagepng($dest, $thumb_file);
break;
}
if ($image) {
imagedestroy($image);
}
return 't' . $width . '_' . $info['basename'];
return true;
}
return $info['basename'];
return false;
}
}

View File

@ -0,0 +1 @@
ALTER TABLE `media` ADD COLUMN `thumb` varchar(255) DEFAULT NULL COMMENT '缩略图路径' AFTER `path`;