simplemde编辑实现上传本地图片

本篇基于你安装了simplemde

1. 注释掉simplemde.js源码,添加自己的代码

function drawImage(editor) {
	// var cm = editor.codemirror;
	// var stat = getState(cm);
	// var options = editor.options;
	// var url = "http://";
	// if(options.promptURLs) {
	// 	url = prompt(options.promptTexts.image);
	// 	if(!url) {
	// 		return false;
	// 	}
	// }
	// _replaceSelection(cm, stat.image, options.insertTexts.image, url);
    var input = document.getElementById('upInput');
    input.click();
}

2. 在前端html添加

<input style="display:none" accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="upInput" ref="upInput" onchange="upupImage()">

3. 将图片文件ajax传给后端,在HTML 的script 脚本type

        // 点击图片图标完成本地图片上传
        function upupImage() {
            fs = $("#upInput")[0].files;
            // var input = this.$refs.upInput
            var formData = new FormData()
            //formData.append("file", input.files[0])
            formData.append("file", fs[0])
            fileUpload(formData)
        }

            // ajax请求后端保存图片
        function fileUpload(formData) {
            $.ajax({
                url: '/uploadimage/',
                type: 'POST',
                cache: false,
                data: formData,
                timeout: 5000,
                //必须false才会避开jQuery对 formdata 的默认处理
                // XMLHttpRequest会对 formdata 进行正确的处理
                processData: false,
                //必须false才会自动加上正确的Content-Type
                contentType: false,
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {
                    console.log(data)
                    simplemde.codemirror.replaceSelection("![](http://127.0.0.1:8000/"+ data.path+")")
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("上传出错了")
                }
            });
        }

4. 后端输入路由,详情查看我另外文章.

https://juejin.cn/post/6844903871060377613