Vue实现图片粘贴上传

今天在升级bbs-go发表推文功能时，为了图片上传更加方便，所以计划加上图片的复制上传功能。下面看下我的实现：

html部分

  <textarea
        v-model="content"
        @input="onInput"
        @paste="handleParse"
        @keydown.ctrl.enter="doSubmit"
        @keydown.meta.enter="doSubmit"
        placeholder="有什么新鲜事想告诉大家"
        class="title-input"
      />

js部分

  handleParse(e) {
      const items = e.clipboardData && e.clipboardData.items
      let file = null
      if (items && items.length) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.includes('image')) {
            file = items[i].getAsFile()
          }
        }
      }

      if (!file) {
        return
      }

      this.showUploader = true // 展开上传面板
      e.preventDefault() // 阻止默认行为即不让剪贴板内容在div中显示出来

      if (this.imageCount + 1 > this.maxImageCount) {
        this.message = '图片数量超过上限'
        return
      }

      this.upload(file) // 上传
    },

  async upload(file) {
      try {
        const formData = new FormData()
        formData.append('image', file, file.name)
        const ret = await this.$axios.post('/api/upload', formData)
        this.images.push(ret.url)
      } catch (e) {
        this.message = e.message || e
      }
    },

注意事项

复制粘贴上传好像没法一下子上传多个图片。如果复制多个图片，通过e.clipboardData.items 只能获取到第一个文件。

完整代码

完成代码可见我在bbs-go中的实现：
https://github.com/mlogclub/bbs-go/blob/master/site/components/PostTwitter.vue