Markdown编辑器 简单的上传代码-图片存储

1. Markdown编辑器 下载：
   

   下载Markdown

   来源：默认网盘

   立即下载
2. 复制下面代码保存到  uploadImg.js 文件，复制到editor.md/uploadImg.js 根目录。

//function initPasteDragImg(Editor){

//    var doc = document.getElementById(Editor.id)

//    doc.addEventListener('paste', function (event) {

//        var items = (event.clipboardData || window.clipboardData).items;

//        var file = null;

//        if (items && items.length) {

//            // 搜索剪切板items

//            for (var i = 0; i  items.length; i++) {

//                if (items[i].type.indexOf('image') !== -1) {

//                    file = items[i].getAsFile();

//                    break;

//                }

//            }

//        } else {

//            console.log("当前浏览器不支持");

//            return;

//        }

//        if (!file) {

//            console.log("粘贴内容非图片");

//            return;

//        }

//        uploadImg(file,Editor);

//    });

//    var dashboard = document.getElementById(Editor.id)

//    dashboard.addEventListener("dragover", function (e) {

//        e.preventDefault()

//        e.stopPropagation()

//    })

//    dashboard.addEventListener("dragenter", function (e) {

//        e.preventDefault()

//        e.stopPropagation()

//    })

//    dashboard.addEventListener("drop", function (e) {

//        e.preventDefault()

//        e.stopPropagation()

//     var files = this.files || e.dataTransfer.files;

//     uploadImg(files[0],Editor);

//     })

//}

//function uploadImg(file,Editor){

//    var formData = new FormData();

//    var fileName=new Date().getTime()+"."+file.name.split(".").pop();

//    formData.append('editormd-image-file', file, fileName);

//    $.ajax({

//        url: Editor.settings.imageUploadURL,

//        type: 'post',

//        data: formData,

//        processData: false,

//        contentType: false,

//        dataType: 'json',

//        success: function (msg) {

//            var success=msg['success'];

//            if(success==1){

//                var url=msg["url"];

//                if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){

//                    Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");

//                }else{

//                    Editor.insertValue("[下载附件]("+msg["url"]+")");

//                }     

//            }else{

//                console.log(msg);

//                alert("上传失败");

//            }

//        }

//    });

//}

3.新建上传目录uploads ；复制代码保存到mian.go;    go代码如下：

执行：go mod init name //name为项目名 或直接执行 go mod init mian.go
执行：go mod tidy //加载所需库

package main

import (
	"fmt"
	"io"
	"net/http"
	"os"
	"path/filepath"

	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.Static("public/", "./editor.md")
	r.Static("pub/", "./editor.md")
	r.LoadHTMLGlob("./index.html")
	r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", gin.H{})
	})
        // 实际应用时可直接删除 
	r.GET("/uploads/:filename", func(c *gin.Context) {  
		filename := c.Param("filename") // 获取 URL 中的文件名参数
		// 拼接完整的文件路径
		filePath := filepath.Join("uploads", filename)
		// 检查文件是否存在
		if _, err := os.Stat(filePath); os.IsNotExist(err) {
			c.JSON(200, gin.H{"error": "File not found"})
			return
		}
		// 发送文件
		c.File(filePath)
	})
	// 设置文件上传的路由
	r.POST("/upload", func(c *gin.Context) {
		// 单文件上传
		file, err := c.FormFile("editormd-image-file") // 假设这是前端发送的表单字段名
		if err != nil {
			c.String(http.StatusBadRequest, fmt.Sprintf("上传文件失败: %v", err))
			return
		}
		// 定义文件保存路径
		filePath := "./uploads/" + file.Filename
		// 打开文件以读取内容
		src, err := file.Open()
		if err != nil {
			c.String(http.StatusInternalServerError, fmt.Sprintf("打开文件失败: %v", err))
			return
		}
		defer src.Close()
		// 创建文件以保存上传的文件
		dst, err := os.Create(filePath)
		if err != nil {
			c.String(http.StatusInternalServerError, fmt.Sprintf("创建文件失败: %v", err))
			return
		}
		defer dst.Close()
		// 复制文件内容
		if _, err := io.Copy(dst, src); err != nil {
			c.String(http.StatusInternalServerError, fmt.Sprintf("保存文件失败: %v", err))
			return
		}
		// 返回成功响应
		c.JSON(http.StatusOK, gin.H{
			"success": 1,
			"message": "文件上传成功",
			"url":     "//localhost:8080/uploads/" + file.Filename, // 注意：这里可能需要调整为实际的URL路径 localhost直接改为自己域名就行
		})
	})

	// 启动服务器
	r.Run(":8080")
}

4.前段测试文件index.html  // 实际应用时可直接删除  r.GET("/", func(c *gin.Context) {
c.HTML(200, "index.html", gin.H{})
})   只保留uploads函数。

index.html代码：文章最后下载~~~~

5.下载地址“”

文件说明：

main   //linux 文件

main.exe // Windows可直接执行测试

index.html  //测试MD编辑器页面

editor.md   //在线编辑器 组件

文件下载

来源：默认网盘

立即下载