能否支持上传图片功能？ about vue-simplemde

[F-loat]

可以考虑，目前可以通过自定义工具栏来自行实现，欢迎PR。

[F-loat]

不过感觉这个功能由simplemde来实现比较好，#294，simplemde的作者好像也有2.0的计划，就是不知道要什么时候了。。

[jiemoon]

这个功能可以有，

[jiemoon]

我自己实现了功能，但不知怎么整合进去 🍔

export default {
    components: {
            markdownEditor
    },
    computed: {
            simplemde () {
                return this.$refs.markdownEditor.simplemde
            }
    },
    mount() {
            let _this = this;
            this.simplemde.codemirror.on('drop', function (editor, e) {
                var fileList = e.dataTransfer.files;
                if (fileList.length > 1){
                    _this.$message.error('一次只能上传一张图片');
                    return false;
                }
                if(fileList[0].type.indexOf('image') === -1){
                    _this.$message.error("只能上传图片！");
                    return false;
                }

                // placeholder
                let placeholder = "![Uploading " + fileList[0]['name'] + "...]()"
                editor.replaceRange(placeholder, {
                    line: editor.getCursor().line,
                    ch: editor.getCursor().ch
                });

                var img = new FormData();
                img.append('img', fileList[0]);
                axios.post('/images/upload', img).then((res) => {
                    if (res.data["status"] == "success") {
                        editor.setValue(editor.getValue().replace(tips, "![](" + res.data['uri'] + ")"));
                    } else {
                        _this.$message.error(res.data["message"]);
                    }
                })
            });
    }
}

后端实现(Laravel)

public function store(Request $request)
    {
        $file = $request->file('img');
        if($file->isValid()) {
            $image = new Image();
            $image->name = $file->getClientOriginalName();
            $image->extension = $file->getClientOriginalExtension();
            if (!in_array($image->extension, array('jpg', 'jpeg', 'gif', 'png')))  {
                return response()->json([
                    'status' => 'fail',
                    'message' => 'Invalid image extension we just allow JPG, GIF, PNG, JPEG'
                ]);
            };

            $image->mime_type = $file->getMimeType();
            $image->path = $file->store('/upload/images');
            return response()->json([
                'status' => 'success',
                'uri' => url('/') . '/' . $image->path
            ]);
        } else {
           return response()->json([
              'status' => 'fail',
              'message' => '文件非法'
          ]);
    }

[F-loat]

@liniu 不好意思，之前没看到，整合具体是要达到什么效果，现在已经实现了什么呢

[liniu]

用了第三方的库，可以实现黏贴上传

new InlineAttachment.CodeMirror4(simplemde.codemirror,{        		 
	 	 uploadUrl: 'http://127.0.0.1:8080/doc/attach/upload',
         progressText: '' ,
         onFileUploadResponse(xhr) {
             //var placeholder=this.settings.progressText;
             var result = JSON.parse(xhr.responseText);    
             var content='![]('+result.data+')';        
             this.editor.insertValue(content);            
         }
    });

但是细节还要处理，如：progressText是提示 ，上传完将这段提示替换成正式的url.

[F-loat]

还是觉得不适合加在这个库里，有需要的话参考上面的示例先自行实现吧，实在想要加入这个功能的话，可以给simplemde提pr