markdown编辑器实现图片上传图床

有熟悉的朋友可能知道我最近一直在做编辑器的小项目，麻雀虽小，五脏俱全吧。最近做到插入图片的部分了，简单分享一下方案。

前期选型主要有三种方案：

纯前端获取本地绝对路径，直接赋值(可以在编辑器中正常显示，但是文件无法被控制，且无法上传到各网站)
使用云服务厂商提供的OSS服务(方便快捷，而且不用操心，但是花钱。个人小项目慎用，尤其是公开的项目，会有人恶意刷流量)
使用个人服务器搭建图床(搭建费点儿劲，需要自己维护，但是近乎免费。花钱买了个99一年的服务器~)

所以，没啥可选的，直接第三种方案。

图床程序选择了开源的EasyImage2.0，原因很简单，宝塔面板上有一键安装，并且玩儿起来比较简单。

安装图床

如果有服务器使用宝塔面板的可以去软件商店直接搜，点击一键安装，齐活！

如果不用宝塔面板可以参考一下官网文档《icret.github.io/EasyImages2...

安装依赖

EasyImage2.0项目依赖PHP以及Nginx，另外需要安装一下PHP内部的一些依赖(一般都是默认安装好的)，Fileinfo、iconv、zip、mbstring、openssl。

安装程序

Windows Server的话可以直接下载程序。

Linux可以用git下载程序，或者在Github上下载完成以后上传。

配置代理

另外就是需要配置下Nginx代理，将某个端口代理到EasyImage2.0的程序文件夹下。

nginx 复制代码

location / {
    root /home/www/easyImage
    index index.html;
    try_files $uri $uri/ /index.html;
}

上传图片

安装完成正常运行图床程序以后，就可以着手上传程序的开发了。

html 复制代码

<button onclick="uploadImage">上传图片</button>
<input type="file" id="uploadImageId" style="display: none" oninput="changeUploadImage" />


<script>
function uploadImage() {
    document.getElementById("uploadImageId").click();
}

function changeUploadImage() { 
    let file = document.getElementById("uploadImageId").files[0];
    if (file) {
        let formData = new FormData();
        formData.append("name": file.name);
        formData.append("file", file);
        formData.append("sign", new Date().getTime() / 1000 | 0);
        $.ajax({
            url: "http://图床地址/app/upload.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data.url);
            }
        })
    }
}
</script>

注意：这里可能存在跨域问题，记得部署代理。