记vue input框获取剪切板图片，进行上传

记vue input框获取剪切板图片，进行上传

样式参考微博网页版私信聊天上传剪切板图片

<el-input type="textarea" :rows="4" placeholder="" ref="sendMsg" resize="none" v-model="contentText"
 @keydown.enter.native="keyDown" @input='changeInput' @focus="changeFocus"
 @paste.native.capture.prevent="pasting">
</el-input>
 <!-- 获得剪切板 -->
 <el-dialog title="发送图片" :visible.sync="dialogPicVisible" width="30%" :before-close="handleClose"         class="dialogChat">
   <el-image style="width: 100%;max-height: 500px;" fit="contain" :src="dialogImgSrc">
   </el-image>
   <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSendImg">发送</el-button>
   </span>
 </el-dialog>

 pasting(e) {
        let that = this; //改变this指向
        console.log(e)
        console.log(e.clipboardData.files[0])
        if (e.clipboardData.files[0]) { //获取剪切板图片
          that.pastingFiles = e.clipboardData.files[0]  //该值可直接上传服务器
          that.dialogPicVisible = true  //弹窗显示
          if (!e || !window.FileReader) return; // 看是否支持FileReader
          let reader = new FileReader();
          reader.readAsDataURL(e.clipboardData.files[0]); //在这里转换的
          reader.onloadend = function() {
            that.dialogImgSrc = this.result; //赋值
          }
        }
        // console.log(that.dialogImgSrc)
      },

 //发送弹框图片 上传服务器
      handleSendImg() {
        this.dialogPicVisible = false
        var fd = new FormData()
        fd.append('media', this.pastingFiles)
        fd.append('type', 'image')
        uploadSendMedia(fd).then(data => {
          console.log(data)
          if (data.code != 0) {
            this.$message.error(data.msg);
            return
          }
        })
      },