上传媒体文件

README.md

@@ -12,6 +12,6 @@ composer require tyrantg/dcat-admin-braft-editor
 
 ## TODO
 
-- [ ] 图片 / 视频上传
+- [x] 图片 / 视频上传
 - [ ] 自定义样式
 - [ ] 自定义编辑器插件

resources/js/react/BraftEditor.js

@@ -8,29 +8,108 @@ export default class Editor extends React.Component {
 
     state = {
         // 创建一个空的editorState作为初始值
-        editorState: BraftEditor.createEditorState(null)
+        editorState: BraftEditor.createEditorState(null),
+        mediaAccepts: {
+            image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
+            video: 'video/mp4',
+            audio: 'audio/mp3',
+        },
+        mediaExternals: {
+            image: true,
+            video: true,
+            audio: true,
+            embed: true,
+        },
+        mediaPasteImage: true,
+        mediaMaxSize: 1024 * 1024 * 10
     }
 
     async componentDidMount () {
-        // 假设此处从服务端获取html格式的编辑器内容
-        // const htmlContent = await fetchEditorContent()
         // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
         this.setState({
             editorState: BraftEditor.createEditorState(this.props.content)
         })
     }
 
+    handleUpload = (param) => {
+
+        const serverURL = '/admin/tyrantg/braft/upload'
+        const xhr = new XMLHttpRequest
+        const fd = new FormData()
+
+        const handleUploadSuccess = (response) => {
+            const {result_code, return_code, msg, url} = JSON.parse(xhr.responseText)
+            if (result_code === 'SUCCESS') {
+                param.success({
+                    url: url,
+                    /*meta: {
+                        id: 'xxx',
+                        title: 'xxx',
+                        alt: 'xxx',
+                        loop: true, // 指定音视频是否循环播放
+                        autoPlay: true, // 指定音视频是否自动播放
+                        controls: true, // 指定音视频是否显示控制栏
+                        poster: 'http://xxx/xx.png', // 指定视频播放器的封面
+                    }*/
+                })
+                Dcat.success('文件上传成功');
+            } else {
+                Dcat.success(msg);
+            }
+
+        }
+
+        const handleUploadProgress = (event) => {
+            // 上传进度发生变化时调用param.progress
+            param.progress(event.loaded / event.total * 100)
+        }
+
+        const handleUploadError = (response) => {
+            // 上传发生错误时调用param.error
+            param.error({
+                msg: 'unable to upload.'
+            })
+        }
+
+        xhr.upload.addEventListener("progress", handleUploadProgress, false)
+        xhr.addEventListener("load", handleUploadSuccess, false)
+        xhr.addEventListener("error", handleUploadError, false)
+        xhr.addEventListener("abort", handleUploadError, false)
+
+        fd.append('file', param.file)
+        xhr.open('POST', serverURL, true)
+        xhr.send(fd)
+    }
+
+    mediaValidate = (file) => {
+        const { mediaMaxSize } = this.state
+        const sizeResult = file.size > mediaMaxSize
+        if (sizeResult) {
+            Dcat.error('文件大小超过'+mediaMaxSize / (1024 * 1024)+'MB');
+        }
+        return ! sizeResult
+
+    }
+
     handleEditorChange = (editorState) => {
         this.setState({ editorState })
     }
 
     render () {
-        const { editorState } = this.state
+        const { editorState, mediaAccepts, mediaExternals, mediaPasteImage } = this.state
+        const { handleChange } = this.props
         return (
             <div>
                 <BraftEditor
                     value={editorState}
-                    onChange={this.props.handleChange}
+                    onChange={handleChange}
+                    media={{
+                        uploadFn: this.handleUpload,
+                        validateFn: this.mediaValidate,
+                        accepts: mediaAccepts,
+                        externals: mediaExternals,
+                        pasteImage: mediaPasteImage,
+                    }}
                 />
             </div>
         )

resources/views/braft-editor.blade.php

@@ -6,7 +6,7 @@
 
         @include('admin::form.error')
 
-        <braft-editor name="{{$name}}" value="{!! $value !!}"></braft-editor>
+        <braft-editor name="{{$name}}" value="{{$value}}"></braft-editor>
 
         <input type="hidden" class="braft" name="{{$name}}" value="{{ old($column, $value) }}" />
 

src/DcatAdminBraftEditorServiceProvider.php

@@ -8,19 +8,19 @@
 
 class DcatAdminBraftEditorServiceProvider extends ServiceProvider
 {
-	public function register()
-	{
-		//
-	}
+    public function register()
+    {
+        //
+    }
 
-	public function init()
-	{
-		parent::init();
+    public function init()
+    {
+        parent::init();
 
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'braft');
 
         Admin::booting(function () {
             Form::extend('braftEditor', BraftEditor::class);
         });
-	}
+    }
 }

src/Http/Controllers/BraftEditorController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace TyrantG\BraftEditor\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class BraftEditorController extends Controller
+{
+    public function upload(Request $request)
+    {
+        $file = $request->file('file')->store('public/braft-files');
+
+        $url = '/storage/'.str_replace('public/', '', $file);
+
+        return response()->json([
+            'return_code' => '200',
+            'result_code' => 'SUCCESS',
+            'msg' => '上传成功',
+            'url' => $url,
+        ]);
+    }
+}

src/Http/routes.php

@@ -0,0 +1,6 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use TyrantG\BraftEditor\Http\Controllers\BraftEditorController;
+
+Route::any('tyrantg/braft/upload', BraftEditorController::class.'@upload');

version.php

@@ -4,4 +4,7 @@
     '1.0.0' => [
         'Initialize extension.',
     ],
+    '1.0.1' => [
+        '上传媒体文件',
+    ],
 ];