<template><el-uploadclass="upload-demo"action="uploadPath":http-request="uploadSectionFile"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></template>
uploadSectionFile (f) {//附件上传let that = thislet Orientationlet ndataconsole.log('uploadSectionFile', 'f', f)if (f.file.size <= 1 * 1024 * 1024) {//判断图片是否大于1M,是就直接上传ndata = f.filethat.postImg(ndata)} else {//反之压缩图片let reader = new FileReader()// 将图片2将转成 base64 格式reader.readAsDataURL(f.file)console.log(reader)// 读取成功后的回调reader.onloadend = function () {let result = this.resultlet img = new Image()img.src = resultimg.onload = function () {let data = press(img, Orientation)that.headerImage = datandata = press(img, Orientation)//BASE64转图片let arr = ndata.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}ndata = new File([u8arr], f.file.name, {type: mime })that.postImg(ndata)}}}}, async postImg (ndata) {let param = new FormData() //创建form对象param.append('file', ndata) //通过append向form对象添加数据let config = {headers: {'Content-Type': 'multipart/form-data'}}try {const response = await FileUpload(param, config) //此处写接口对应的vue方法if (response.Code == 200) {this.handleFileUploadSuccess(response.Data)}} catch (error) {console.log(error)}},compress (img, Orientation) {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')//瓦片canvaslet tCanvas = document.createElement('canvas')let tctx = tCanvas.getContext('2d')let initSize = img.src.lengthlet width = img.widthlet height = img.height//如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = width * height / 4000000) > 1) {console.log('大于400万像素')ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height// 铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)//如果图片像素大于100万则使用瓦片绘制let countif ((count = width * height / 1000000) > 1) {console.log('超过100W像素')count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片// 计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)}}} else {ctx.drawImage(img, 0, 0, width, height)}//修复ios上传图片的时候 被旋转的问题if (Orientation != '' && Orientation != 1) {switch (Orientation) {case 6://需要顺时针（向左）90度旋转this.rotateImg(img, 'left', canvas)breakcase 8://需要逆时针（向右）90度旋转this.rotateImg(img, 'right', canvas)breakcase 3://需要180度旋转this.rotateImg(img, 'right', canvas)//转两次this.rotateImg(img, 'right', canvas)break}}//进行最小压缩let ndata = canvas.toDataURL('image/jpeg', 0.1)console.log('压缩前：' + initSize)console.log('压缩后：' + ndata.length)console.log('ndata:' + ndata)console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%')tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0return ndata},
