Simplemde实现图片拖拽、拷贝上传功能详解

  发布日期:   2018-06-09
  最新修改:   2020-04-09
  阅读次数:   335 次

一、前言:
  • 本次实现我不打算使用七牛云,原因很简单:1、该博客为本人个人使用博客,平时需要上传的图片资源不多;2、七牛云无法控制恶意刷流量的行为,安全起见,还是通过自己的站点提供服务即可,通过nginx设置缓存时间来缓解带宽压力。
  • 因为我的服务端使用的是 koa2 ,所以本次通过koa-multer模块来实现图片的上传功能

二、服务端koa-multer集成
  • 1、添加相关的依赖包: yarn add koa-multer

  • 2、导入koa-multer:const multer = require('koa-multer');//加载koa-multer模块

  • 具体代码如下:

    //文件上传
    //配置
    var storage = multer.diskStorage({
        //文件保存路径为public/uploads/ 需要手动创建public/uploads目录
        destination: function (req, file, cb) {
            cb(null, 'public/uploads/')
        },
        //修改文件名称为{当前时间.文件后缀}
        filename: function (req, file, cb) {
            var fileFormat = (file.originalname).split(".");
            cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
        }
    })
    //加载配置
    var upload = multer({ storage: storage });
    //路由
    router.post('/upload', upload.single('file'), async (ctx, next) => {
        ctx.body = {
            filename: ctx.req.file.filename//返回文件名
        }
    })
三、Simplemde 实现拖拽上传
  • 1、拦截浏览器默认打开文件的行为:

    // 阻止浏览器默认打开拖拽文件
          window.addEventListener("drop", function (e) {
              e = e || event
              if (e.target.className == "CodeMirror-scroll") {  // check wich element is our target
                  console.log("有文件拖拽到编辑器了")
                  e.preventDefault()
              }
          }, false)
  • 2、监听markdown编辑器的拖拽方法

    simplemde.codemirror.on('drop', function (editor, e) {

          console.log("codemirror on drop")
    
          if (!(e.dataTransfer && e.dataTransfer.files)) {
              _this.$message({
                  message: "该浏览器不支持操作",
                  type: 'error'
              })
              return
          }
          let dataList = e.dataTransfer.files
          console.log("dataList:" + dataList)
          console.log(dataList)
          for (let i = 0; i < dataList.length; i++) {
              if (dataList[i].type.indexOf('image') === -1 ) {
                  _this.$message({
                      message: "仅支持Image上传",
                      type: 'error'
                  })
                  continue
              }
              let formData = new FormData()
              formData.append('file', dataList[i])
              console.log(formData)
              #开始上传文件
              fileUpload(formData);
    
          }
      });
  • 3、编写ajax函数实现异步上传

    function fileUpload(formData) {
        $.ajax({
            url: '/上传路径',
            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)
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("上传出错了")
            }
        });
    }
    四、总结
  • 上文还剩一处没有完成,也就是上传完后将值自动添加到编辑器内,这里我就不列出来了,相信看到这里,剩下的都不是事。

  • 通过上面,我们就实现了图片上传的功能。

  • 感谢观看到这里的小伙伴,喜欢就关注我哦!

五、补充
  • 前面代码缺少了粘贴部分的实现代码,现在补上:

     simplemde.codemirror.on('paste', function (editor, e) {
                console.log("codemirror on paste")
    
                if(!(e.clipboardData&&e.clipboardData.items)){
                    alert("该浏览器不支持操作");
                    return;
                }
                let dataList = e.clipboardData.items;
                console.log("dataList:" + dataList)
                console.log(dataList)
                for (let i = 0; i < dataList.length; i++) {
                    if (dataList[i].type.indexOf('image') === -1) {
    
                        continue
                    }
                    let formData = new FormData()
                    formData.append('file', dataList[i].getAsFile())
                    console.log(formData)
                    fileUpload(formData, editor);
    
                }
            });
  • 如此便完整了


   转载规则

《Simplemde实现图片拖拽、拷贝上传功能详解字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。