Electron复制转换的Base64图片

Posted 2020-11-23 ronle

CODE

<template>
  <div id="wrapper">
    <main>
      <div>文件路径：{{filePath}}</div>
      <el-input
        type="textarea"
        :rows="18"
        style="margin-top: 10px"
        resize="none"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <div class="btn" @click="copyToClipBoard">复制转换后的文本</div>
    </main>
  </div>
</template>

<script>
  export default {
    name: ‘landing-page‘,
    data() {
      return {
        filePath: null,
        textarea: null
      }
    },
    methods: {
      fileLoad() {
        document.addEventListener(‘drop‘, (e) => {
          e.preventDefault();
          e.stopPropagation();
          for (const f of e.dataTransfer.files) {
            this.filePath = f.path
          }
          console.log(e.dataTransfer.files)
          let file = e.dataTransfer.files[0];
          let that = this;
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (event) {
            that.textarea = event.target.result
          }
        });
        document.addEventListener(‘dragover‘, (e) => {
          e.preventDefault();
          e.stopPropagation();
        });
      },
      copyToClipBoard() {
        let txt = document.querySelector(‘.el-textarea__inner‘);
        txt.select(); // 选择对象
        document.execCommand(‘Copy‘); // 执行浏览器复制命令
        this.$message({
          showClose: true,
          message: ‘已经成功复制到剪切板‘,
          type: ‘success‘
        });
      }
    },
    mounted() {
      this.fileLoad()
    }
  }
</script>

<style>
  @import url(‘https://fonts.googleapis.com/css?family=Source+Sans+Pro‘);
  /*滚动条样式*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    /*font-family: ‘Source Sans Pro‘, sans-serif;*/
    font-family: "Microsoft YaHei", sans-serif;
  }

  #wrapper {
    background: radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 1) 40%,
      rgba(229, 229, 229, .9) 100%
    );
    height: 100vh;
    padding: 30px 30px;
    width: 100vw;
    font-size: 14px;
  }

  .btn {
    margin-top: 10px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #666;
    border: 1px solid #666;
    cursor: pointer;
  }
</style>