第一阶段项目技术点总结（ES6技术，vue技术）

Posted 2020-11-19 zhoudayao

多思多想，勤劳！

 1. 扩展运算符‘...‘，主要操作用于数组的展开运算，一般简单的用于数组的合并，数组每个元素的拆分

2.const  routers = require.context ( ‘ 要操作的目标文件夹 ‘ ，布尔值（是否要检索其子文件夹），正则（以什么结尾的文件） )

　　router.key().map( key => router (key). default )获取每个

3.Promise关键字，当两个同步请求的ajax的时候需要用Promise.all进行同步请求贴上代码

//此函数为不断随着时间请求ajax获取返回值

_timer() {
const getDataNow = Api.dateNow.get() // 第一个请求
const getDataAlarm = Api.dataAlarm.get() // 第二个ajax请求
Promise.all([getDataNow, getDataAlarm]).then(([res1, res2]) => {
this.digitCapture = parseInt(res1.data.result) || 0
this.digitAlarm = parseInt(res2.data.result) || 0
this._timerHandle = setTimeout(() => {
this._timer()
}, 1500)
})

4.图片上传并压缩成任意大小

// 压缩图片并转为jpeg
export function convert2JPEG(img) {
// 图片质量 待确认? 120x120
const canvas = document.createElement(‘canvas‘)
canvas.width = 200
canvas.height = 200 * (img.height / img.width)
const ctx = canvas.getContext(‘2d‘)
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
return canvas.toDataURL(‘image/jpeg‘, 0.9)
}

// 获取图片base64
export function getBase64(fileBlob) {
return new Promise((resolve, reject) => {
const fr = new FileReader()
fr.addEventListener(‘load‘, () => {
resolve(fr.result)
})

fr.addEventListener(‘error‘, () => {
reject(fr.error)
})

fr.readAsDataURL(fileBlob)
})
}

//图片上传所触发的change事件

handleUpload(e) {
const files = e.target.files
this.getBase64(files[0]).then(res => {
this.model.imageBase64 = res
})

//保证每次点击上传都会触发点击事件（清空当前value数据）
e.srcElement.value = ‘‘
}

5.上传文件处理

// 显示文件的名称和大小

chooseFile(event) {//为input的change事件
// 获取文件名：
// console.log($(‘#importFileName‘).val())
$(‘#importFileName‘).val(event.currentTarget.files[0].name + ‘_‘ + (event.currentTarget.files[0].size / 1024).toFixed(2) + ‘kb‘)
// console.log(event.currentTarget.files[0])
},
// 点击开始导入
submit() {
var fd = new FormData()
var file = $(‘#input‘)[0].files[0]
// uploadFile为约定的文件流参数名
fd.append(‘uploadFile‘, file) //添加文件数据
Api.putFile.post(fd).then((res) => {
this.this.dialogVisible = false
})
}