electron拖拽的实现

<template>
  <div>
    <el-row type="flex"  justify="center" style="margin-bottom: 15px" :gutter="10">
      <el-col :span="12">
        <div class="grid-content bg-purple" id="box">
          拖动区域
        </div>
      </el-col>
      <el-col :span="12">
        <el-input
            type="textarea"
            :rows="20"
            placeholder="输出内容部分"
            v-model="words_result">
        </el-input>
      </el-col>
    </el-row>
    <el-row type="flex"  justify="center">
      <el-button type="primary" plain @click="copy">复制</el-button>
      <el-button type="danger" plain @click="clear">清空</el-button>
    </el-row>
  </div>
</template>

<script>
const fs = window.require('fs');
import axios from "axios";

const extensions = ["png","jpe","jpeg"];

const file2Base64 = (file, callback) => {
  let reader = new FileReader();
  // 传入一个参数对象即可得到基于该参数对象的文本内容
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    // target.result 该属性表示目标对象的DataURL
    // console.log(e.target.result);
    callback(encodeURI(e.target.result))
  };
}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {

    if (!localStorage.getItem("access_token")){
      this.getToken();
    }
    const box =document.querySelector('#box');
    //绑定拖拽结束事件
    box.addEventListener('drop', (e)=>{
      //必须要阻止拖拽的默认事件
      e.preventDefault();
      e.stopPropagation();

      //获得拖拽的文件集合
      let  files=e.dataTransfer.files;
      if(files.length>0) {
        let extension=files[0].path.substring(files[0].path.lastIndexOf('.')+1);
        if(!extensions.includes(extension.toLowerCase())) {
          this.$message({
            message: '上传文件格式出错',
            type: 'error'
          });
        }else{
          file2Base64(files[0],(image)=>{
            this.image = image;
            this.getText();
          })
        }
      }
    });

    //绑定拖拽文件在容器移动事件
    box.addEventListener('dragover',(e)=>{
      //必须要阻止拖拽的默认事件
      e.preventDefault();
      e.stopPropagation();
    })

  },
  data() {
    return {
      words_result: "",
      image:null,

    }
  },
  methods:{
     async getText(){

       const params = new URLSearchParams();
       params.append('image', this.image)
       params.append('detect_direction', "true");

       const config = {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
         }
       }
       let res = await axios.post("https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token="+localStorage.getItem("access_token"),params,config)
       let words_result = res.data.words_result;
       if (res.data.error_code){
         if (res.data.error_code === 110){
           this.$message.error("上传失败,请重试");
           await this.getToken();
         }
       }else{
         this.words_result = words_result.map(item=>item.words).join(" ");
       }
     },


    //获取token
    async getToken(){
        let res = await axios.get(`https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=<client_id>&client_secret=<client_secret>
`);
      if (res.data){
        let access_token =  res.data.access_token;
        localStorage.setItem("access_token",access_token);
      }
    },

    copy(){
      //如果需要回调：
      this.$copyText(this.words_result).then( e => {
        this.$message.success('复制成功');
      }, function (e) {
        this.$message.error('复制失败');
      })
    },
    clear(){
       this.words_result = ""
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  padding: 40% 0;
  text-align: center;
  color: #ffffff;
}

</style>