thoth-frontend-test/src/components/handleFile/copyPaste.vue

<template>
  <div>
    <el-button id="pasteUpload" type="primary" style="display: none" @click.stop="pasteUpload">upload</el-button>
    <normal-dialog
      :show-dialog="showCopyFile"
      :title="'上传截图'"
      :width="'40%'"
      :submit-button="'上传'"
      :top="'5vh'"
      @confirm="confirmUpload()"
      @cancel="showCopyFile=false"
    >
      <div class="file-dialog">
        <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
          <el-form-item label="图片命名" prop="name">
            <el-col style="width: 75%">
              <el-input v-model="imageName.name" placeholder="请输入图片名称" />
            </el-col>
            <el-col style="width: 10%">.png</el-col>
          </el-form-item>
        </el-form>
        <div class="image">
          <div class="image-center">
            <img :src="imageUrl" class="image-url">
          </div>
        </div>
      </div>
    </normal-dialog>
  </div>
</template>
<script>
import normalDialog from '@/components/dialog/normalDialog'
import axios from 'axios'
export default {
  components: {
    normalDialog
  },
  props: {
    id: {
      type: String,
      default: null,
      required: false
    }
  },
  data() {
    return {
      imageRules: {// 文件上传规则
        name: [
          { required: true, message: '请输入图片名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      },
      showCopyFile: false, // 复制文件对话框
      imageName: { name: null }, // 复制文件对象
      imageUrl: null // 图片地址
    }
  },
  created() {

  },
  mounted() {
    this.lisenPaste()
  },
  methods: {
    lisenPaste() { // 监听粘贴事件
      let contain
      console.log(this.id)
      if (this.id) {
        contain = document.getElementById(this.id)
      } else {
        contain = document.body
      }
      contain.onpaste = function(event) {
        event.stopImmediatePropagation()
        const data = (event.clipboardData || window.clipboardData)
        const items = data.items
        const fileList = [] // 存储文件数据
        if (items && items.length) { // 检索剪切板items
          for (let i = 0; i < items.length; i++) { // items[i].getAsFile() 想要的文件
            fileList.push(items[i].getAsFile())
            window.uploadFiles = fileList
          }
          document.getElementById('pasteUpload').click()
        }
      }
    },
    pasteUpload() { //
      if (!window.uploadFiles[0]) return
      const reader = new FileReader()
      reader.readAsDataURL(window.uploadFiles[0])
      reader.onload = () => {
        const reg = new RegExp(/image\/png/)
        this.imageUrl = reader.result
        if (this.imageUrl.match(reg)) { // 判断是否是图片
          this.showCopyFile = true
          this.imageName.name = this.generateMixed(10)
        }
      }
    },
    generateMixed(len) { // 图片随机名字生成
      const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      let res = ''
      for (let i = 0; i < len; i++) {
        const id = Math.ceil(Math.random() * 35)
        res += chars[id]
      }
      return res
    },
    async confirmUpload() {
      if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
        return false
      }
      this.showCopyFile = false
      const res = await this.updateFile(window.uploadFiles[0])
      const data = res.data
      const item = {
        name: `${this.imageName.name}.png` || `${this.generateMixed(10)}.png`,
        status: 'success',
        url: 'http:' + data.url
      }
      this.$emit('uploadFile', item)
      this.$message({
        showClose: true,
        message: '文件上传成功',
        type: 'success'
      })
      this.imageName.name = null
      this.imageUrl = null
      window.uploadFiles = null
    },
    updateFile(file) {
      const param = new FormData() // 创建form对象
      param.append('file', file)// 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: false
      } // 添加请求头
      return new Promise((resolve, reject) => {
        axios.post('http://star.xiaojukeji.com/upload/img.node', param, config)
          .then(response => {
            resolve(response)
          }).catch(err => {
            reject(err)
          })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.file-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-form {
    width: 100%;
  }
  .image {
    position: relative;
    width: 61%;
    padding-top: 60%;
    border:1px solid #409EFF;
    border-radius: 4px;
    .image-center {
      padding: 1%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      display: flex;
      justify-content: center;
    }
    .image-url {
      height: 100%;
    }
  }
}
</style>