Ado, directly on the code
The front end (front end say one more thing, in the initial stage of use, do not know how it is, when looking at copy the configuration parameters of the document on the cloud, there have been mistakes, get back less than $ _file, all the morning, afternoon Internet search what other people upload pictures to do with the code, do not know whether the official made a mistake, we do not dare, we do not dare to ask a)
<div id="editor"></div>
<script>
var E = window.wangEditor
var editor = new E ( '# editor')
editor.customConfig.menus = [
'Head', // title
'Bold', // bold
// 'foreColor', // text color
// 'fontSize', // Font Size
// 'fontName', // Font
// 'italic', // italic
// 'underline', // Underline
// 'strikeThrough', // Strikeout
// 'backColor', // background color
'Link', // Insert Link
'List', // list
'Justify', // alignment
'Quote', // references
'Emoticon', // expression
'Image', // Insert Picture
'Table', // table
'Video', // insert video
// 'code', // Insert Code
'Undo', // revoked
'Redo' // repeat
]
// filter pasted text style
editor.customConfig.pasteFilterStyle = true
// ignore paste the contents of the picture
editor.customConfig.pasteIgnoreImg = false
// configuration upload pictures
editor.customConfig.uploadFileName = 'myFile'; // Set the name of the parameter file upload
editor.customConfig.uploadImgServer = 'disposed upload path'; // set the uploaded file server path
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // The image size is limited to 3M
// custom event upload pictures
editor.customConfig.uploadImgHooks = {
before : function(xhr, editor, files) {
},
success : function(xhr, editor, result) {
console.log ( "upload successfully");
},
fail : function(xhr, editor, result) {
layer.msg ( "upload failed");
},
error : function(xhr, editor) {
console.log ( "Upload error");
},
timeout : function(xhr, editor) {
console.log ( "upload time out");
}
}
editor.create()
E.fullscreen.init('#editor');
</script>
Back-end code, the back end is to write, until the code from the Internet to other people's expense, himself hurried yesterday to learn a little, himself wrote a simple code to achieve, achieve nothing more than logic to create the specified directory (file_exists function), Without this folder, you create a new folder, create a folder with mkdir, it is linux create folder command this path, move_uploaded_file ($ tmp, $ dest), $ tmp file uploads over the temporary path, $ dest path settings are saved, and the system is the absolute path with the file name. I am using a framework tp5.1, it does not support constants, so the constant use of the system must be introduced think \ facade \ Env, the latter will be used picture compression feature, so the latter will also learn about the front and rear ends of the recording picture compression.
public function up()
{
$file = $_FILES;
if(empty($file)){
$result["error"] = "1";
$result['data'] = '';
}else{
$tmp = $file['myFile']['tmp_name'];
$houzhui = substr($file['myFile']['type'],6);
$ Feed = date ( 'YMD', time ());
$fileName = 'XX'.time().'.'.$houzhui;
$root_path = Env::get('root_path');
$dest = $root_path.'/public/upload/image/'.$foder.'/'.$fileName;
if(!file_exists($root_path.'/public/upload/image/'.$foder)){
mkdir($root_path.'/public/upload/image/'.$foder);
}
$result = move_uploaded_file($tmp,$dest);
if($result){
return json(['errno'=>0,'data'=>['/ueditor/php/upload/image/'.$foder.'/'.$fileName]]);
}else{
return json ([ 'errno' => 2, 'data' => [ 'Photo failed']]);
}
}
}
Badly written, only for your own use and reference