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

• 更多分享：www.catbro.cn

一、前言：

• 本次实现我不打算使用七牛云，原因很简单：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);
  
              }
          });
  

• 如此便完整了