[最新]editor.md怎么实现黏贴上传图片功能？从内存中复制图片并上传结合tp6

> editor.md怎么实现黏贴上传图片功能？从内存中复制图片并上传结合tp6。

更新于2021-09-28 10:02:49 星期二

1：我的editor容器代码
```
<div id="test-editormd">
<textarea name="info" id="info" style="width:98%;height:600px;visibility:hidden;resize:none;"></textarea>
</div>
```

2:实例化editor
```
var testEditor;
	$(function() {
		testEditor = editormd("test-editormd", {
			width           : "100%",
			height:'600px',
			//autoHeight      : true,
			path            : "__STATIC__/index/editormd/lib/",
			imageUpload    : true,
			imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL : "{:url('upload/mdeditor')}",
			htmlDecode      : "style,script,iframe",
			tex             : true,
			emoji           : true,
			taskList        : true,
			flowChart       : true,
			sequenceDiagram : true,
			onload : function() {
				// alert("onload");
				// this.setMarkdown("### onloaded");
				// console.log("onload =>", this, this.id, this.settings);
				//编辑器 拖拽上传
				var codeEditor = $(".CodeMirror")[0];
				codeEditor.ondragenter = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("dragenter");
				  return false;
				};
				codeEditor.ondragover = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("dragover");
				  return false;
				};
				codeEditor.ondrop = function(e) {
				  e.preventDefault();
				  e.stopPropagation();
				  console.log("drop");
				  var files = e.dataTransfer.files // 这里获取到用户拖放的文件
				  console.log('333333333333333333333333');
				  console.log(files);
				  // 其中 ajaxUpload是Ajax上传文件的函数
				  // uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数，用于生成代码片段并插入编辑器
				  ajaxUpload('{:url(\'upload/mdeditor\')}', files, uploadCallback);
				  return false;
				};
			}
		});

$("#append-btn").click(function(){
			$.get("__STATIC__/index/editormd/test.md", function(md){
				testEditor.appendMarkdown(md);
			});
		});
	});
```

3:js监听黏贴上传

方法一（兼容性略差）
```
/**
	 * 粘贴上传图片
	 */
	$("#test-editormd").on('paste', function (ev) {
		var data = ev.clipboardData;
		var items = (event.clipboardData || event.originalEvent.clipboardData).items;
		for (var index in items) {
			var item = items[index];
			if (item.kind === 'file') {
				var blob = item.getAsFile();
				var reader = new FileReader();
				reader.onload = function (event) {
					var base64 = event.target.result;
					//ajax上传图片
					$.post("{:url('upload/paste_up')}",{base:base64}, function (ret) {
						layer.msg(ret.msg);
						if (ret.code == 1) {
							//新一行的图片显示
							//editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")");
							uploadCallback(ret);
						}
					});
				}; // data url!
				var url = reader.readAsDataURL(blob);
			}
		}
	});
```

方法二兼容性好

```
$("#test-editormd").on('paste', function (ev) {
		console.log(ev)
		var items = (ev.clipboardData || ev.originalEvent.clipboardData).items;
		console.log(items)
		for (var index in items) {
			var item = items[index];
			if (item.kind === 'file') {
				var blob = item.getAsFile();
				var form = new FormData;
				form.append('t', 'ajax-uploadpic');
				form.append('editormd-image-file', blob);
				console.log(form)
				$.ajax({
					//url: "{:url('Upload/paste_up')}", //原旧版黏贴上传地址 以base64流格式上传
					url: "{:url('Upload/mdeditor')}",
					type: "POST",
					dataType: "json",
					data: form,
					processData: false,
					contentType: false,
					beforeSend: function() {
						layer.load(1, {
							shade: [0.1,'#fff'] //0.1透明度的白色背景
						});
					},
					error: function() {
						layer.closeAll();
						layer.msg("上传失败")
					},
					success: function(data) {
						//callback('success', data);
						layer.msg("上传成功")
						uploadCallback(data);
					}
				})
			}
		}
	});
```

4:上传后图片显示处理
```
function uploadCallback(data) {
	  var url = data.url; // 依据后端返回的数据格式而定
	  var link = url;
	  if (!url) return false;

if (alt === "") {
		cm.setCursor(cursor.line, cursor.ch + 2);
	  }
	}
```

5：付 拖拽图片上传代码
>具体触发拖拽上传方法在步骤1中的codeEditor.ondrop = function(e) 中实现触发

```
//ajax 上传文件
	function ajaxUpload(uploadUrl, files, callback) {
	  console.log("my ajax upload begin");
	  console.log(files[0]);
	  var formData = new FormData();
	  formData.append('file', files[0]);
	  // 可以添加其他需要传给后端的参数
	  $.ajax({
		url: uploadUrl,
		type: 'POST',
		data: formData,
		cache: false,
        contentType: false,    //不可缺
        processData: false,    //不可缺
		dataType: 'json',
		success: function(data) {
		  console.log("result:", data);
		  callback(data);
		},
		complete: function(data) {
		}
	  });

return false;
	}

```

6：后台图片处理代码

对应方法一

```
//editor md黏贴上传  从内存中黏贴
    public function paste_up()
    {
        $base64 = input('base');
        $base64 = str_replace("data:image/png;base64,","",$base64);
        $base64 = str_replace("data:image/jpg;base64,","",$base64);
        $base64 = str_replace("data:image/gif;base64,","",$base64);
        $base64 = str_replace("data:image/jpeg;base64,","",$base64);
        $file = base64_decode($base64);
        $date = date("Ymd");
        $path = "./public/uploads/".$date."/";
        $filename = $path.uniqid().".png";
        if(!is_dir($path)){
            mkdir($path,0755);
        }
        $img = file_put_contents($filename,$file);

$savename = Request::domain()."/".$filename;
        $savename = str_replace("./","",$savename);
        $arr = [
            // success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
            // message : "提示的信息，上传成功或上传失败及错误信息等。",
            // url     : "图片地址"        // 上传成功时才返回
            'code'=>1,
            'msg'=>"成功",
            'url'=>$savename
        ];
        return json($arr);

}

```
对应方法二
```
public function mdeditor()
    {
        $file = request()->file();
        // p($file);die;
        try {
            validate(['image'=>'filesize:10240|fileExt:jpg,gif,jpeg,png|image:200,200,jpg'])
                ->check($file);
            $file = request()->file("editormd-image-file");
            // 上传到本地服务器
            $savename = \think\facade\Filesystem::disk('upload')->putFile( 'avatar', $file);
            $this->saveToDb($file,"/data/".$savename);//保存到数据库
            $savename = Request::domain()."/data/".$savename;

//return json(["code"=>200,"msg"=>"成功","data"=>$savename]);
            $arr = [
                // success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                // message : "提示的信息，上传成功或上传失败及错误信息等。",
                // url     : "图片地址"        // 上传成功时才返回
                'success'=>1,
                'message'=>"成功",
                'url'=>$savename
            ];
            return json($arr);
        } catch (think\exception\ValidateException $e) {
            $arr = [
                // success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                // message : "提示的信息，上传成功或上传失败及错误信息等。",
                // url     : "图片地址"        // 上传成功时才返回
                'success'=>0,
                'message'=>$e->getMessage(),
                'url'=>$savename
            ];
            return json($arr);
        }

}
```

注:原创不易,转载请注明出处( https://micuu.com/new/412.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。