如何进行图片粘贴上传?

如何进行图片粘贴上传?

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    130 引用 • 944 回帖 • 3 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa
    订阅者

    点上传或者把图片拖拽进来

    1 回复
  • felicityyin
    作者

    好的,多谢

  • felicityyin
    作者

    前端这样写:

    initVditor() {
          const that = this
          const options = {
            cache: {
              enable: true,
            },
            mode: 'ir',
            height: this.height,  // 编辑器总高度
            theme: 'dark',  // 编辑器主题
            preview: {
              delay: 100,
              show: !this.isMobile,
              theme: {
                current: 'dark'  // 内容主题
              },
              hljs: {
                enable: true,  // 代码高亮
                style: 'vim',  
                lineNumber: true
              },
              outline: {  // 显示大纲
                enable: true
              },
              // markdown: {
              //   toc: true  // 展示目录
              // }
            },
            toolbarConfig: {
                pin: false,  // 是否固定工具栏
            },
            after: () => {
              if (this.content) {
                this.vditor.setValue(this.content)
              }
            },
            upload: {
              url: process.env.WEB_API + '/file/upload',
              max: 5 * 1024 * 1024,
              linkToImgUrl: process.env.WEB_API + '/file/upload',
              handler(files) {
                let formData = new FormData()
                for (let i = 0; i < files.length; i++) {
                  formData.append('file', files[i])
                }
                let request = new XMLHttpRequest()
                // 图片上传路径
                request.open('POST', process.env.WEB_API + '/file/upload')
                request.onload = that.onloadCallback 
                request.send(formData)
              }
            }
          }
          this.vditor = new Vditor('vditor', options)
          return this.vditor
        },
        onloadCallback(oEvent) {
          const currentTarget = oEvent.currentTarget
          console.log("返回的结果", currentTarget)
          if (currentTarget.status !== 200) {
            return this.$message({
              type: 'error',
              message: currentTarget.status + ' ' + currentTarget.statusText
            })
          }
    
          let resp = JSON.parse(currentTarget.response)
          let imgMdStr = ''
      
          if (resp.Code === Code.SUCCESS) {
            imgMdStr = `![${'img'}](${resp.Data.ImgUrl})`
          } else {
            return this.$message({
              type: 'error',
              message: resp.Msg
            })
          }
          this.vditor.insertValue(imgMdStr)
        },
    

    后端接接收到图片后可以保存到本地或上传到云存储,然后返回图片的 URL