直传版图片裁剪

resources/assets/css/index.css

@@ -1 +1 @@
-.file-list-wrap[data-v-6cc4e6c1]{margin-top:2px!important}
+.file-list-wrap[data-v-436cf262]{margin-top:2px!important}.custom-upload-dragger[data-v-436cf262]{max-width:400px}.modal-container[data-v-4581ab08]{display:flex;flex-direction:column}.modal-container .cropper-container[data-v-4581ab08]{width:480px;height:270px}.modal-container .cropper-container img[data-v-4581ab08]{max-width:100%;display:block;visibility:hidden}.modal-container .large[data-v-4581ab08]{width:960px!important;height:540px!important}.modal-container .cropper-controls[data-v-4581ab08]{height:50px;display:flex;align-items:center}.modal-container .cropper-controls .controls-first[data-v-4581ab08]{margin-left:12px}.file-list-wrap[data-v-97b670e6]{margin-top:2px!important}.preview[data-v-97b670e6]{width:138px;height:138px;border:1px solid #dae1e7;border-radius:10px;background-color:#f1f1f1;display:flex;justify-content:center;align-items:center}.preview img[data-v-97b670e6]{max-width:100%;max-height:100%;border-radius:4px;padding:1px}.preview[data-v-97b670e6]:hover{border:1px dashed #2dd3c4}.custom-upload-dragger[data-v-97b670e6]{width:138px;height:138px;display:flex;justify-content:center;align-items:center;border-radius:10px}.custom-upload-dragger .btn-plus[data-v-97b670e6]{font-size:88px;color:#b0b0b0}.modal-container[data-v-97b670e6]{display:flex;flex-direction:column}.modal-container .cropper-container[data-v-97b670e6]{width:480px;height:270px}.modal-container .cropper-container img[data-v-97b670e6]{max-width:100%;display:block;visibility:hidden}.modal-container .cropper-controls[data-v-97b670e6]{height:50px;display:flex;align-items:center}.modal-container .cropper-controls .controls-first[data-v-97b670e6]{margin-left:12px}

resources/views/image.blade.php

@@ -0,0 +1,17 @@
+@php($id = $column . random_int(123456, 987654))
+
+<div class="{{$viewClass['form-group']}}" >
+
+    <label class="{{$viewClass['label']}} control-label pt-0">{!! $label !!}</label>
+
+    <div class="{{$viewClass['field']}}" id="{{ $id }}">
+
+    </div>
+</div>
+<script type="module" id="{{$column}}">
+    import app from '/vendor/dcat-admin-extensions/weiwait/dcat-vue/js/index.js';
+    const App = app()
+
+    App.provide('provides', @json($provides, true))
+    App.mount('#{{ $id }}')
+</script>

src/DcatVueServiceProvider.php

@@ -7,7 +7,9 @@ use Dcat\Admin\Admin;
 use Dcat\Admin\Form;
 use Illuminate\Support\Facades\Event;
 use Weiwait\DcatVue\Field\File;
+use Weiwait\DcatVue\Field\Image;
 use Weiwait\DcatVue\Field\MultipleFile;
+use Weiwait\DcatVue\Field\MultipleImage;
 use Weiwait\DcatVue\Field\Vue;
 use Weiwait\DcatVue\Models\FilesystemConfig;
 
@@ -34,6 +36,8 @@ class DcatVueServiceProvider extends ServiceProvider
 //		Form::extend('vue', Vue::class);
 		Form::extend('file', File::class);
 		Form::extend('multipleFile', MultipleFile::class);
+        Form::extend('image', Image::class);
+        Form::extend('multipleImage', MultipleImage::class);
 
         Admin::asset()->css(Admin::asset()->getAlias('@weiwait.dcat-vue')['css']);
 

src/Field/Image.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace Weiwait\DcatVue\Field;
+
+use Dcat\Admin\Form\Field;
+use Weiwait\DcatVue\Models\WeiwaitUpload;
+
+class Image extends Field\Image
+{
+    protected $view = 'weiwait.dcat-vue::file';
+    protected string $disk;
+
+    protected function prepareInputValue($file)
+    {
+        WeiwaitUpload::query()->whereIn('name', (array) $file)->delete();
+
+        return parent::prepareInputValue($file);
+    }
+
+    public function render()
+    {
+        if (!$this->shouldRender()) {
+            return '';
+        }
+
+        $this->setDefaultClass();
+
+        $this->callComposing();
+
+        $this->withScript();
+
+        $this->withProvides();
+
+        $this->addVariables([
+            'provides' => $this->variables(),
+        ]);
+
+        return view($this->view(), $this->variables());
+    }
+
+    protected function formatAttributes()
+    {
+        return $this->attributes;
+    }
+
+    protected function withProvides()
+    {
+        $disk = config('admin.upload.disk', config('filesystems.default'));
+
+        $this->addVariables([
+            'component' => 'Image',
+            'multiple' => false,
+            'disk' => $this->disk ?? $disk,
+            'dir' => $this->getDirectory(),
+            'uploaded_url' => route('dcat.admin.weiwait.file.uploaded'),
+            'obs_config_url' => route('dcat.admin.weiwait.file.obs-config'),
+       ]);
+    }
+
+    public function disk($disk): self
+    {
+        $this->disk = $disk;
+
+        return parent::disk($disk);
+    }
+
+    /**
+     * @param float|array $ratio
+     * @return self
+     */
+    public function ratio($ratio): self
+    {
+        if (empty($ratio)) return $this;
+
+        if (is_numeric($ratio)) {
+            return parent::ratio($ratio);
+        }
+
+        if (is_array($ratio)) {
+            $this->mergeOptions(['dimensions' => ['ratio' => $ratio]]);
+        }
+
+        return $this;
+    }
+
+    /**
+     * @param int | array $width
+     * @param null $height
+     * @return $this
+     */
+    public function resolution($width, $height = null): self
+    {
+        if (!is_array($width)) {
+            $width = [
+                'default' => [$width, $height ?: $width]
+            ];
+        }
+
+        $this->mergeOptions(['resolution' => $width]);
+
+        return $this;
+    }
+
+    /**
+     * @throws \Exception
+     */
+    public function jpeg(float $quality = 1): self
+    {
+        if ($quality > 1 || $quality < 0) {
+            throw new \Exception('图片质量区间[0~1]');
+        }
+
+        $this->mergeOptions(['quality' => $quality]);
+
+        return $this;
+    }
+
+    public function large(): self
+    {
+        $this->mergeOptions(['large' => 'large']);
+
+        return $this;
+    }
+}

src/Field/MultipleImage.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace Weiwait\DcatVue\Field;
+
+use Dcat\Admin\Form\Field;
+use Weiwait\DcatVue\Models\WeiwaitUpload;
+
+class MultipleImage extends Field\MultipleImage
+{
+    protected $view = 'weiwait.dcat-vue::file';
+    protected string $disk;
+
+    protected function prepareInputValue($file)
+    {
+        WeiwaitUpload::query()->whereIn('name', (array) $file)->delete();
+
+        return parent::prepareInputValue($file);
+    }
+
+    public function render()
+    {
+        if (!$this->shouldRender()) {
+            return '';
+        }
+
+        $this->setDefaultClass();
+
+        $this->callComposing();
+
+        $this->withScript();
+
+        $this->withProvides();
+
+        $this->addVariables([
+            'provides' => $this->variables(),
+        ]);
+
+        return view($this->view(), $this->variables());
+    }
+
+    protected function formatAttributes()
+    {
+        return $this->attributes;
+    }
+
+    protected function withProvides()
+    {
+        $disk = config('admin.upload.disk', config('filesystems.default'));
+
+        $this->addVariables([
+            'component' => 'Image',
+            'multiple' => true,
+            'disk' => $this->disk ?? $disk,
+            'dir' => $this->getDirectory(),
+            'uploaded_url' => route('dcat.admin.weiwait.file.uploaded'),
+            'obs_config_url' => route('dcat.admin.weiwait.file.obs-config'),
+       ]);
+    }
+
+    public function disk($disk): self
+    {
+        $this->disk = $disk;
+
+        return parent::disk($disk);
+    }
+
+    /**
+     * @param float|array $ratio
+     * @return self
+     */
+    public function ratio($ratio): self
+    {
+        if (empty($ratio)) return $this;
+
+        if (is_numeric($ratio)) {
+            return parent::ratio($ratio);
+        }
+
+        if (is_array($ratio)) {
+            $this->mergeOptions(['dimensions' => ['ratio' => $ratio]]);
+        }
+
+        return $this;
+    }
+
+    /**
+     * @param int | array $width
+     * @param null $height
+     * @return $this
+     */
+    public function resolution($width, $height = null): self
+    {
+        if (!is_array($width)) {
+            $width = [
+                'default' => [$width, $height ?: $width]
+            ];
+        }
+
+        $this->mergeOptions(['resolution' => $width]);
+
+        return $this;
+    }
+
+    /**
+     * @throws \Exception
+     */
+    public function jpeg(float $quality = 1): self
+    {
+        if ($quality > 1 || $quality < 0) {
+            throw new \Exception('图片质量区间[0~1]');
+        }
+
+        $this->mergeOptions(['quality' => $quality]);
+
+        return $this;
+    }
+
+    public function large(): self
+    {
+        $this->mergeOptions(['large' => 'large']);
+
+        return $this;
+    }
+}

src/Http/Controllers/DcatVueController.php

@@ -29,6 +29,8 @@ class DcatVueController extends Controller
             ->insert(array_map(fn($item) => ['name' => $item, 'created_at' => now(), 'disk' => $request['disk']],
                 (array)$request['files']
             ));
+
+        return Storage::disk($request['disk'])->url($request['files']);
     }
 
     public function obsConfig(Request $request)
@@ -36,7 +38,7 @@ class DcatVueController extends Controller
         switch ($request['disk']) {
             case 'oss':
                 return json_decode(
-                    Storage::disk('oss')->getAdapter()->signatureConfig(prefix: config('admin.upload.directory.file'), expire: 3600),
+                    Storage::disk('oss')->getAdapter()->signatureConfig(prefix: dirname($request['filename']), expire: 3600),
                     true
                 );