常用封装函数

01.把文件进行二进制读取

export function readFile(file) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = e => {
      resolve(e.target.result)
    }
  })
}

02把读取的数据转为服务器可用的数据格式

1.定义字段对应表

export let character = {
  name: {
    text: 'A',
    type: 'string'
  },
  sex: {
    text: 'B',
    type: 'string'
  },
  age: {
    text: 'C',
    type: 'string'
  },
  adress: {
    text: 'D',
    type: 'string'
  }
}

2.进行数据转换

要转换的数据

let data1 = [{姓名:张三,性别:男,年龄:25,城市:深圳},{姓名:李斯,性别:女,年龄:28,城市:上海}]

开始转换

data1.map(item => {
        let o = {}
        for (let k in character) {
          // if (!character.hasOwnProperty(k)) break
          let text = character[k].text
          let type = character[k].type
          let v = item[text] || ''
          type === 'string' ? v = String(v) : null
          type === 'number' ? v = Number(v) : null
          o[k] = v
        }
        console.log(o)
      })

03设置异步间隔延迟

export let delay = function(interval = 0) {
  return new Promise(resolve => {
    let timer = setTimeout(() => {
      clearTimeout(timer)
      resolve()
    }, interval)
  })
}

用法： 在需要延迟的操作之前

await delay(100)

04中国标准时间转换为普通格式

dealdate(dealdate) {
      const date = new Date(dealdate)
      const year = date.getFullYear()   
      let month = date.getMonth() + 1
      month = month<10?"0"+month:month   
      let day = date.getDate()
      day = day<10?"0"+day:day        
      let hour = date.getHours()     
      hour = hour<10?"0"+hour:hour          
      let minute = date.getMinutes() 
      minute = minute<10?"0"+minute:minute  
      let second = date.getSeconds()
      second = second<10?"0"+second:second 
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    },

05自定义创建下载链接

封装接口前指定responseType: "blob",

  // 打印--word文档下载
downloadVisitRecordFile(data) {
    return http({
       url: '/manager/visitRecord/downloadVisitRecordFile',
       method: 'POST',
       responseType: "blob",
       data
    })
},

dayin(){
        serviceApi
        .downloadVisitRecordFile({enterId:this.$route.query.enterId})
        .then((res) => {
          // 自定义创建下载链接
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(res); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "打印--word文档.word"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.style.display = "none";
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
      },

06格式化时间

// 引入
import dayjs from 'dayjs';
// 全局挂载
Vue.prototype.$dayjs = dayjs;
//格式化时间
   formatDate(row) {
     return this.$dayjs(row).format('YYYY-MM-DD hh:mm:ss')
   },

07转换附件图片位base64格式

01、自定义一个方法，用来把图片内容转为base64格式，imgResult就是base64格式的内容了。转为base64字符串要调用h5特性中的FileReader这个api,但是这个api不能return，所以用promise封装一下。

//转换附件图片位base64格式
getBase64(file) {
       return new Promise((resolve, reject) => {
         let reader = new FileReader();
         let fileResult = "";
         reader.readAsDataURL(file);
 　　　　　//开始转
         reader.onload = function() {
           fileResult = reader.result;
         };
 　　　　　//转 失败
         reader.onerror = function(error) {
           reject(error);
         };
 　　　　　//转 结束  咱就 resolve 出去
         reader.onloadend = function() {
           // resolve(fileResult);
           resolve({ name: file.name, 64fileData: fileResult })
         };
       });
     },
    // 使用此方法
    :on-change="getFile"
    // 最后调用一下
  getFile(file, fileList) {
      this.getBase64(file.raw).then(res => {
         console.log(res)
    });
  },
    //拿到最终要上传的附件图片

02、超过1M压缩图片的转换base64方法

    getBase64(file) {
        // console.log(file)
        return new Promise(function (resolve, reject) {
            let img = document.createElement('img');
            let cvs = document.createElement('canvas');
            // let file = me.files[0];    //  获取到文件对象
            //  上传的图片大于 1000KB 时才压缩
            if (file && (file.size / 1024 > 1000)) {
                let reader = new FileReader();
                reader.readAsDataURL(file);     //  转成 base64 编码
                reader.onload = function (e) {
                    let naturalBase64 = e.target.result;    //  获取 base64 编码，这是原图的
                    img.src = naturalBase64;
                    img.onload = function () {
                        let ratio = img.naturalWidth / img.naturalHeight; //  获取原图比例,为了等比压缩
                        cvs.width = 400;
                        cvs.height = cvs.width / ratio;
                        let ctx = cvs.getContext('2d');
                        ctx.drawImage(img, 0, 0, cvs.width, cvs.height);    //  画在 canvas 上
                        // 压缩后新图的 base64
                        let zipBase64 = cvs.toDataURL();
                        resolve({ name: file.name, base64: zipBase64 })
                    }
                }
            } else {
                let reader = new FileReader();
                reader.readAsDataURL(file);     //  转成 base64 编码
                reader.onload = function (e) {
                    let naturalBase64 = e.target.result;
                    resolve({ name: file.name, base64: naturalBase64 })
                }
                reader.onerror = function (error) {
                    console.log(error)
                    reject(error);
                };
            }
        })

    }

08防抖指令

01创建directives.js，放在utils文件夹下；代码如下

// 防抖指令
Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if(!el.disabled) {
        el.disabled = true            
        setTimeout(() => {
          el.disabled = false            
        }, binding.value || 2000)
      }
    });
  }
});

02在main.js中全局引用：// import ‘@/utils/directives.js’

import directives from '@/utils/directives.js'
Vue.use(directives);
或者直接
import '@/utils/directives.js'

//页面中使用

<template>
<div> 
<el-button v-preventReClick>防抖</el-button>
</div> 
</template>