VUE 前端图片转base64,解析EXCEL文件

vue 处理前端文件数据

1 上传文件，转成bas64. 前端用ExcelJs 解析Excel文件内容

<le-dialog :width="'90%'" :title="'节点选择'"
             :destroyOnClose="true"
             :closeOnClickModal="true" append-to-body
             :visible.sync="visible" @close="()=>{visible=false}">
``    <span slot="dialogFooter" class="dialog-footer">
      <input
          type="file"
          id="file"
          style="display:none;"
          accept="image/*"
      />
        <el-button v-if="editModel" @click="pasteByClipboard">粘贴图片</el-button>
        <el-button v-if="editModel" @click="uploadDemoPic">{{btnImageTitle}}</el-button>
        <el-button @click="buttonClick">{{buttonTitle}}</el-button>
        <el-button  @click="cancelBtn">关闭</el-button>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                       :before-upload="importExcelData2"
                       :show-file-list="false">
              <el-button slot="trigger" type="plan" size="mini">导入<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-upload>
    </span>
  </el-dialog>`
  <script>
import ExcelJs from "exceljs"
export default {

  name: "NodeDesc",

  data(){
    return {
   
      visible:false,
    }
  },
  methods:{
   importExcelData2(file){
      const e={target:{files:[file]}}
      this.importExcelData(e)
      return false
    },
    async importExcelData(e){
      var files = e.target.files;
      if (files.length == 0) return;
      const workbook = new ExcelJs.Workbook();
      await workbook.xlsx.load(files[0])
      const worksheet = workbook.getWorksheet(1)
      worksheet.eachRow({ includeEmpty: true },(row, rowNumber) =>{
        if(rowNumber>1){
          const rowItem ={}
          const rowValue =row.getCell(1).value
          rowItem[this.valueKey]=rowValue
          rowItem[this.tagLabel]=row.getCell(2).value
          this.tagValues.push(rowItem)
          this.value.push(rowValue)
          if (this.table.data) {
            let index = this.table.data.findIndex((item) => item[this.valueKey] === rowValue)
            if (index >= 0) {
                this.$refs.table.toggleRowSelection(this.table.data[index]);
            }
          }
        }
      })
    },
    uploadDemoPic(){
      document.getElementById("file").click();
    },
    pasteByClipboard(){
      const that =this
      navigator.clipboard.read().then(res=>{
        console.log('clipboard---',res)
        const imageItem = res.find(item=>(item.types[0]+'').indexOf("image/")>-1)
        if(imageItem){
          imageItem.getType(imageItem.types[0]).then(res=>{
            const reader = new FileReader()
            reader.onload = () => {
              const picData =btoa(reader.result)
              that.demoPic ="data:image/png;base64,"+picData
            }
            reader.readAsBinaryString(res)
          })
        }else {
          this.$message("剪贴板没有可以粘贴的图片")
        }
      })
    },
  created() {
  },
  mounted() {
    const that =this
    document.getElementById("file").addEventListener("change", function(e) {

      var files = e.target.files;
      if (files.length == 0) return;
      const reader = new FileReader()
      reader.onload = () => {
        const picData =btoa(reader.result)
        that.demoPic ="data:image/png;base64,"+picData
      }
      reader.readAsBinaryString(files[0])
      //document.getElementById("file").value = null;
    });
  },
}
</script>