Kindeditor 单独使用文件上传

最新推荐文章于 2024-04-27 12:08:14 发布

Sven在流浪

最新推荐文章于 2024-04-27 12:08:14 发布

阅读量521

点赞数

分类专栏： editor beego #kindeditor 文章标签： golang html 编辑器

本文链接：https://blog.csdn.net/q9090960bnb3/article/details/103727022

版权

beego 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

editor

1 篇文章 0 订阅

订阅专栏

#kindeditor

1 篇文章 0 订阅

订阅专栏

优缺点

集成在Kindeditor 中，不必再去需找其他第三方插件，配置项比较少，只支持POST请求

使用方式

前端

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传</title>
    <link rel="stylesheet" href="/static/editor/kindeditor/themes/default/default.css">
    <script src="/static/editor/kindeditor/kindeditor-all-min.js"></script>
    <script src="/static/editor/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            const uploadbutton = K.uploadbutton({
                button: K('#upload_bt')[0],
                fieldName: 'imgFile',
                // url: '/upload',     //  带 / 从根目录开始  不带 从当前路径 开始
                url: 'upload',
                afterUpload: function (data) {
                    const inputInfo = document.querySelector("#imgsrc")

                    if (data.error === 0) {
                        const img = document.querySelector("#img")
                        img.setAttribute("src", data.url)

                        inputInfo.href = data.url
                        inputInfo.setAttribute("target", "_blank")
                    } else {
                        alert(data.message);
                        inputInfo.setAttribute("target", "")
                    }
                }
            })
            uploadbutton.fileBox.change(function(e){
                uploadbutton.submit();
            })
        })
    </script>
</head>
<body>
    <h1>上传</h1>
    <hr>
    <div>
        <img id="img" src="" alt="请选择上传图片" style="height: 100%" border="1">
        <a id="imgsrc" href="">预览</a>
        <button type="button" id="upload_bt" value="上传"></button>
        <!-- <input type="button" id="upload_bt" value="uploadBT"> -->
    </div>
</body>
</html>

后端

使用 beego，核心代码如下:

func (c *Kindeditorctrller) Upload() {

	if c.Ctx.Input.IsPost(){

		path := conf.Info["file_upload_collection"]

		fResult := func(err error, filename ...string){
			m := make(map[string]interface{})

			if err != nil{
				m["error"] = 1
				m["message"] = err.Error()
			}else{
				m["error"] = 0
				m["url"] = conf.Dmain + path + filename[0]
			}

			c.Data["json"] = m
			c.ServeJSON()
		}

		f, fHeader, err := c.GetFile("imgFile")
		if err != nil{
			fResult(err)
			return
		}
		defer f.Close()

		//logs.Debug("fileinfo:%#v", fHeader)

		if !fileutil.PathIsExist(path){
			err = os.Mkdir(path, os.ModePerm)
			if err != nil{
				fResult(err)
				return
			}
		}

		fw, err := os.Create(path+fHeader.Filename)
		if err != nil{
			fResult(err)
			return
		}
		defer fw.Close()

		bytes, err := io.Copy(fw, f)
		if err != nil{
			fResult(err)
			return
		}

		if bytes != fHeader.Size{
			fResult(fmt.Errorf("保存数据出错"))
			return
		}

		fResult(nil, fHeader.Filename)
	}
}

效果预览

在这里插入图片描述
github

Sven在流浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Kindeditor 单独使用文件上传

优缺点集成在Kindeditor 中，不必再去需找其他第三方插件，配置项比较少，只支持POST请求使用方式前端核心代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传</title> <lin...
复制链接

扫一扫