完成上传文件,头像可以裁剪;

This commit is contained in:
augushong
2019-08-29 13:55:38 +08:00
parent e3927cc6d2
commit 0ddbf60878
12 changed files with 3358 additions and 256 deletions

View File

@@ -2,9 +2,16 @@
namespace app;
use app\model\UploadFiles as AppUploadFiles;
use think\facade\Filesystem;
class UploadFiles
{
public static function add()
{
return new AppUploadFiles();
}
public static function create($data,$allowFiled = [],$replace = false)
{
return AppUploadFiles::create($data,$allowFiled,$replace);
@@ -26,8 +33,15 @@ class UploadFiles
]);
}
public static function clear()
public static function clear($id)
{
$model_file = AppUploadFiles::find($id);
$model_file->clear_time = time();
$model_file->status = 3;
$model_file->save();
return Filesystem::delete($model_file->getData('save_name'));
}
}

View File

@@ -3,9 +3,8 @@
namespace app\admin\controller;
use app\model\Admin as AppAdmin;
use app\model\UploadFiles;
use app\UploadFiles as AppUploadFiles;
use think\facade\View;
use think\Request;
class Admin extends Common
{
@@ -58,8 +57,8 @@ class Admin extends Common
$model_admin = AppAdmin::find($this->adminInfo['id']);
if($model_admin->getData('avatar') != $post_data['avatar']){
UploadFiles::destroy(['save_name'=>$model_admin->getData('avatar')]);
UploadFiles::update(['used_time'=>time()],['save_name'=>$post_data['avatar']]);
AppUploadFiles::delete($model_admin->getData('avatar'));
AppUploadFiles::use($post_data['avatar']);
}

View File

@@ -1,226 +0,0 @@
<?php
namespace app\admin\controller;
use think\Request;
use think\facade\View;
use app\model\App as ModelApp;
use app\model\UploadFiles;
class App extends Common
{
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
//
$app_list = ModelApp::paginate(10);
View::assign('app_list',$app_list);
return View::fetch();
}
/**
* 显示创建资源表单页.
*
* @return \think\Response
*/
public function create()
{
//
$installed_app_list = ModelApp::column('mark_id');
$app_list = get_app_info();
View::assign('app_list',$app_list);
View::assign('installed_app_list',$installed_app_list);
return View::fetch();
}
/**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
//
$post_data = $request->post();
$model_app = ModelApp::where('mark_id',$post_data['mark_id'])->find();
if(!empty($model_app)){
return json_message('应用已存在,不能重复创建');
}
$model_app = new ModelApp();
if(!empty($post_data['poster'])){
UploadFiles::update(['userd_time'=>time()],['save_name'=>$post_data['poster']]);
}
if(!empty($post_data['detail'])){
foreach ($post_data['detail'] as $key => $value) {
if(isset($value['insert'])){
if(isset($value['insert']['image'])){
$full_save_name = $value['insert']['image'];
$save_name = de_source_link($full_save_name);
if($save_name){
UploadFiles::update(['used_time'=>time()],['save_name'=>$save_name]);
}
}
}
}
}
$model_app->data($post_data,true);
$model_app->save();
return json_message();
}
/**
* 显示指定的资源
*
* @param int $id
* @return \think\Response
*/
public function read($id)
{
//
}
/**
* 显示编辑资源表单页.
*
* @param int $id
* @return \think\Response
*/
public function edit($id)
{
//
$model_app = ModelApp::find($id);
$app_list = get_app_info();
View::assign('app_list',$app_list);
View::assign('app',$model_app);
return View::fetch();
}
/**
* 保存更新的资源
*
* @param \think\Request $request
* @param int $id
* @return \think\Response
*/
public function update(Request $request, $id)
{
//
//
$post_data = $request->post();
$model_app = ModelApp::where('id',$id)->find();
if(empty($model_app)){
return json_message('应用不存在');
}
if(!empty($post_data['poster'])){
if($post_data['poster'] != $model_app->getData('poster')){
UploadFiles::destroy(['save_name'=>$model_app->getData('poster')]);
UploadFiles::update(['userd_time'=>time()],['save_name'=>$post_data['poster']]);
}
}
if(!empty($post_data['detail'])){
$image_list = [];
$new_image_list = [];
foreach ($model_app->detail as $key => $value) {
if(isset($value['insert'])){
if(isset($value['insert']['image'])){
$full_save_name = $value['insert']['image'];
$save_name = de_source_link($full_save_name);
if($save_name){
$image_list[] = $save_name;
}
}
}
}
foreach ($post_data['detail'] as $key => $value) {
if(isset($value['insert'])){
if(isset($value['insert']['image'])){
$full_save_name = $value['insert']['image'];
$save_name = de_source_link($full_save_name);
if($save_name){
$new_image_list[] = $save_name;
}
}
}
}
$del_image_list = array_diff($image_list,$new_image_list);
foreach ($del_image_list as $key => $value) {
UploadFiles::destroy(['save_name'=>$value]);
}
$add_image_list = array_diff($new_image_list,$image_list);
foreach ($add_image_list as $key => $value) {
UploadFiles::update(['used_time'=>time()],['save_name'=>$value]);
}
}
$model_app->data($post_data,true);
$model_app->save();
return json_message();
}
/**
* 删除指定资源
*
* @param int $id
* @return \think\Response
*/
public function delete($id)
{
//
$model_app = ModelApp::find($id);
if(!empty($model_app->getData('poster'))){
UploadFiles::udpate(['delete_time'=>time()],['save_name'=>$model_app->getData('poster')]);
}
if(!empty($model_app->getData('detail'))){
foreach ($model_app->detail as $key => $value) {
if(isset($value['insert'])){
if(isset($value['insert']['image'])){
$full_save_name = $value['insert']['image'];
$save_name = de_source_link($full_save_name);
if($save_name){
UploadFiles::update(['delete_time'=>time()],['save_name'=>$save_name]);
}
}
}
}
}
$model_app->delete();
return json_message();
}
}

View File

@@ -3,6 +3,7 @@
namespace app\admin\controller;
use app\model\UploadFiles;
use app\UploadFiles as AppUploadFiles;
use think\facade\View;
use think\Request;
@@ -18,9 +19,15 @@ class File extends Common
//
$type = $this->request->param('type',1);
$status = $this->request->param('status','');
$list = UploadFiles::where('type',$type)->order('id desc')->paginate();
$model_list = UploadFiles::where('type',$type)->order('id desc');
if($status != ''){
$model_list->where('status',$status);
}
$list = $model_list->paginate();
View::assign('list',$list);
return View::fetch();
@@ -91,4 +98,11 @@ class File extends Common
{
//
}
public function clear($id)
{
AppUploadFiles::clear($id);
return json_message();
}
}

View File

@@ -6,10 +6,10 @@ use think\Request;
use think\facade\View;
use app\model\SystemConfig;
use think\facade\Cache;
use app\model\UploadFiles;
use EasyWeChat\Factory;
use think\facade\Config;
use app\model\WxPublicAccount;
use app\UploadFiles as AppUploadFiles;
class System extends Common
{
@@ -43,9 +43,9 @@ class System extends Common
foreach ($post_data as $key => $value) {
if(\in_array($key,$upload_files_config)){
$old_save_name = get_system_config($key);
UploadFiles::update(['used_time'=>time()],['save_name'=>$value]);
AppUploadFiles::use($value);
if($old_save_name != $value){
UploadFiles::destroy(['save_name'=>$old_save_name]);
AppUploadFiles::delete($old_save_name);
}
}
if(isset($list[$key])){

View File

@@ -5,8 +5,8 @@ namespace app\api\controller;
use think\Request;
use think\facade\Filesystem;
use think\facade\Config;
use app\model\UploadFiles;
use app\BaseController;
use app\UploadFiles as AppUploadFiles;
class Files extends BaseController
{
@@ -40,7 +40,7 @@ class Files extends BaseController
}
$dir_name = $request->param('dir','data');
$model_file = new UploadFiles();
$model_file = AppUploadFiles::add();
$model_file->file_name = $file->getOriginalName();
$model_file->mime_type = $file->getOriginalMime();
$model_file->ext_name = $file->extension();

View File

@@ -6,8 +6,8 @@ use app\BaseController;
use think\facade\Config;
use EasyWeChat\Factory;
use app\model\WxPublicAccount;
use app\model\UploadFiles;
use app\model\SystemConfig;
use app\UploadFiles as AppUploadFiles;
use think\facade\Cache;
class WxOpen extends BaseController
@@ -58,21 +58,24 @@ class WxOpen extends BaseController
if(!empty($model_auth_account->getData('head_img'))){
UploadFiles::destroy(['save_name'=>$model_auth_account->getData('head_img')]);
AppUploadFiles::delete($model_auth_account->getData('head_img'));
}
$model_auth_account->head_img = \save_url_file($wx_public_account_info['authorizer_info']['head_img'],3);
UploadFiles::update(['used_time'=>time()],['save_name'=>$model_auth_account->getData('head_img')]);
AppUploadFiles::use($model_auth_account->getData('head_img'));
$model_auth_account->service_type_info = $wx_public_account_info['authorizer_info']['service_type_info']['id'];
$model_auth_account->verify_type_info = $wx_public_account_info['authorizer_info']['verify_type_info']['id'];
$model_auth_account->user_name = $wx_public_account_info['authorizer_info']['user_name'];
$model_auth_account->alias = $wx_public_account_info['authorizer_info']['alias'];
if(!empty($model_auth_account->getData('qrcode_url'))){
UploadFiles::destroy(['save_name'=>$model_auth_account->getData('qrcode_url')]);
AppUploadFiles::delete($model_auth_account->getData('qrcode_url'));
}
$model_auth_account->qrcode_url = save_url_file($wx_public_account_info['authorizer_info']['qrcode_url'],2);
UploadFiles::update(['used_time'=>time()],['save_name'=>$model_auth_account->getData('qrcode_url')]);
AppUploadFiles::use($model_auth_account->getData('qrcode_url'));
$model_auth_account->business_info = json_encode($wx_public_account_info['authorizer_info']['business_info']);
$model_auth_account->principal_name = $wx_public_account_info['authorizer_info']['principal_name'];
$model_auth_account->signature = $wx_public_account_info['authorizer_info']['signature'];

View File

@@ -0,0 +1,11 @@
body {
}
/*!
* Cropper v0.7.6-beta
* https://github.com/fengyuanchen/cropper
*
* Copyright 2014 Fengyuan Chen
* Released under the MIT license
*/
.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{width:100%;height:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important}.cropper-modal,.cropper-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-canvas{background-color:#fff;opacity:0;filter:alpha(opacity=0)}.cropper-modal{background-color:#000;opacity:.5;filter:alpha(opacity=50)}.cropper-dragger{position:absolute;top:10%;left:10%;width:80%;height:80%}.cropper-viewer{display:block;width:100%;height:100%;overflow:hidden;outline-width:1px;outline-style:solid;outline-color:#69f;outline-color:rgba(51,102,255,.75)}.cropper-dashed{position:absolute;display:block;border:0 dashed #fff;opacity:.5;filter:alpha(opacity=50)}.cropper-dashed.dashed-h{top:33.3%;left:0;width:100%;height:33.3%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.3%;width:33.3%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;opacity:.1;filter:alpha(opacity=10)}.cropper-face{top:0;left:0;cursor:move;background-color:#fff}.cropper-line{background-color:#69f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;background-color:#69f;opacity:.75;filter:alpha(opacity=75)}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1;filter:alpha(opacity=100)}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";background-color:#69f;opacity:0;filter:alpha(opacity=0)}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75;filter:alpha(opacity=75)}}.cropper-hidden{display:none!important}.cropper-invisible{position:fixed;top:0;left:0;z-index:-1;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;opacity:0;filter:alpha(opacity=0)}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-canvas,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,145 @@
/*!
* Cropper v3.0.0
*/
layui.config({
base: '/static/lib/layui/lib/cropper/' //layui自定义layui组件目录
}).define(['jquery','layer','cropper'],function (exports) {
var $ = layui.jquery
,layer = layui.layer;
var html = "<link rel=\"stylesheet\" href=\"/static/lib/layui/lib/cropper/cropper.css\">\n" +
"<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
" <div class=\"layui-form-item\">\n" +
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">\n" +
" <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" +
" <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
" </label>\n" +
" <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
" </div>\n" +
" <div class=\"layui-form-mid layui-word-aux\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
" <img src=\"\" >\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"layui-row\">\n" +
" <div class=\"layui-col-xs6\">\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
" </div>\n" +
" <div class=\"layui-col-xs5\" style=\"text-align: right;\">\n" +
// " <button type=\"button\" class=\"layui-btn\" title=\"移动\"></button>\n" +
// " <button type=\"button\" class=\"layui-btn\" title=\"放大图片\"></button>\n" +
// " <button type=\"button\" class=\"layui-btn\" title=\"缩小图片\"></button>\n" +
" <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置图片\"></button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
"</div>";
var obj = {
render: function(e){
$('body').append(html);
var self = this,
elem = e.elem,
saveW = e.saveW,
saveH = e.saveH,
mark = e.mark,
area = e.area,
url = e.url,
data = e.data,
done = e.done;
var content = $('.showImgEdit')
,image = $(".showImgEdit .readyimg img")
,preview = '.showImgEdit .img-preview'
,file = $(".showImgEdit input[name='file']")
, options = {aspectRatio: mark,preview: preview,viewMode:1};
$(elem).on('click',function () {
layer.open({
type: 1
, content: content
, area: area
, success: function () {
image.cropper(options);
}
, cancel: function (index) {
layer.close(index);
image.cropper('destroy');
}
});
});
$(".layui-btn").on('click',function () {
var event = $(this).attr("cropper-event");
//监听确认保存图像
if(event === 'confirmSave'){
image.cropper("getCroppedCanvas",{
width: saveW,
height: saveH
}).toBlob(function(blob){
var formData=new FormData();
var last_dir_index = file.val().lastIndexOf('\\')
var filename = file.val().substr(last_dir_index--);
formData.append('file',blob,filename);
console.log(data);
Object.keys(data).forEach(function(key){
formData.append(key,data[key]);
})
$.ajax({
method:"post",
url: url, //用于文件上传的服务器端请求地址
data: formData,
processData: false,
contentType: false,
success:function(result){
done(result);
if(result.code == 0){
// layer.msg(result.msg,{icon: 1});
layer.closeAll('page');
}
}
});
});
//监听旋转
}else if(event === 'rotate'){
var option = $(this).attr('data-option');
image.cropper('rotate', option);
//重设图片
}else if(event === 'reset'){
image.cropper('reset');
}
//文件选择
file.change(function () {
var r= new FileReader();
var f=this.files[0];
r.readAsDataURL(f);
r.onload=function (e) {
image.cropper('destroy').attr('src', this.result).cropper(options);
};
});
});
}
};
exports('croppers', obj);
});

View File

@@ -70,18 +70,25 @@
{include file="common/_footer"}
<script>
layui.use(['layer','upload'],function(){
layui.config({
base:'/static/lib/layui/lib/cropper/'
}).use(['layer','upload','croppers'],function(){
var upload = layui.upload;
var croppers = layui.croppers;
var uploadSiteLogo = upload.render({
var uploadSiteLogo = croppers.render({
elem:'.upload-admin-avatar',
url:'{:url("api/Files/save")}',
data:{
type:2,
dir:'admin_avatar'
},
accept:'images',
}
,saveW:150 //保存宽度
,saveH:150
,mark:1/1 //选取比例
,area:'900px' //弹窗宽度
,accept:'images',
done:function(result){
if(result.code == 0){
layer.msg('上传成功');

View File

@@ -27,15 +27,16 @@
</div>
<div class="main-container">
<div>
<form action="" class="layui-form">
<form action="" lay-filter="filter" class="layui-form">
<input type="hidden" name="type" value="{$Request.param.type|default=1}">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<select name="city" lay-verify="">
<div class="layui-input-inline" style="width: 200px;">
<select name="status" lay-verify="">
<option value="">全部</option>
<option value="0">未使用(仅供预览)</option>
<option value="1">使用</option>
<option value="1">使用</option>
<option value="2">已删除</option>
<option value="3">已清除</option>
</select>
@@ -67,7 +68,7 @@
<td colspan="10">暂无数据</td>
</tr>';{/php}
{volist name="list" id="vo" empty="$empty"}
<tr>
<tr data-id="{$vo.id}">
<td>{$vo.id}</td>
<td>
{switch $vo.mime_type}
@@ -100,11 +101,15 @@
</td>
<td>
<div class="layui-btn-container">
{if condition="!empty($vo->getData('used_time')) &&
empty($vo->getData('delete_time'))" }
<div class="layui-btn layui-btn-sm">强制清除文件</div>
{if condition="!empty($vo->getData('used_time')) && empty($vo->getData('delete_time'))" }
<div class="layui-btn layui-btn-sm force-clear">强制清除文件</div>
{else /}
<div class="layui-btn layui-btn-sm">清除文件</div>
{if condition="empty($vo->getData('clear_time'))" }
<div class="layui-btn layui-btn-sm clear">清除文件</div>
{/if}
{/if}
{if condition="empty($vo->getData('clear_time'))" }
<a class="layui-btn layui-btn-sm" href="{$vo.src}" target="_blank">下载</a>
{/if}
</div>
@@ -124,6 +129,49 @@
{include file="common/_footer"}
<script>
layui.use(['layer','form'],function(){
var form = layui.form;
form.val('filter',{
status:'{$Request.param.status}'
})
$('.clear').click(function(){
var item = this;
console.log($(item).parents('tr').data('id'));
layer.confirm('确定要清除吗?清除后不能恢复',function(){
$.get('{:url("File/clear")}',{
id:$(item).parents('tr').data('id')
},function(result){
if(result.code == 0){
layer.msg('删除成功');
}else{
layer.msg(result.msg)
}
})
})
})
$('.force-clear').click(function(){
var item = this;
layer.confirm('确定要强制清除吗?该文件有可能正在使用',function(){
$.get('{:url("File/clear")}',{
id:$(item).parents('tr').data('id')
},function(result){
if(result.code == 0){
layer.msg('删除成功');
}else{
layer.msg(result.msg)
}
})
})
})
})
</script>
</div>
</body>