图片上传以及图片压缩

<input type="file" class="reply-thumb__input" name="image" accept="image/*" @change=‘handleInputChange‘ />

handleInputChange (event) { ?????// if (this.picData.length >= 9) return ?????// debugger ?????const file = event.target.files[0] ?????const imgMasSize = 1024 * 1024 * 8 ?????// 检查文件类型 ?????if ([‘jpeg‘, ‘png‘, ‘gif‘, ‘jpg‘].indexOf(file.type.split(‘/‘)[1]) < 0) { ???????// 自定义报错方式 ???????// Toast.error(‘文件类型仅支持 jpeg/png/gif！‘, 2000, undefined, false) ???????// Toast.fail(‘文件类型仅支持 jpeg/png/gif！‘, 2000) ???????// Toast.fail(‘文件类型仅支持 jpeg/png/gif！‘, 2000) ???????return ?????} ?????// 文件大小限制 ?????if (file.size > imgMasSize) { ???????// 文件大小自定义限制\ ???????Toast({ ?????????message: ‘文件大小不能超过2MB！‘, ?????????className: ‘hint-message‘ ???????}) ???????return ?????} ?????const reader = new FileReader() ?????const img1 = event.target.files[0] ?????reader.readAsDataURL(img1) ?????// reader.onloadend = () => { ?????// ??this.curImg.url = reader.result ?????// ??this.curImg.id = this.count++ ?????// } ?????// 判断是否是ios ?????// if (window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { ?????// ??// iOS ?????// ??this.transformFileToFormData(file) ?????// ??return ?????// } ?????// 图片压缩之旅 ?????this.transformFileToFormData(file) ???}, ???transformFileToFormData (file) { ?????const formData = new FormData() ?????// 自定义formData中的内容 ?????/* ???????三个参数 ???????file：一个是文件(类型是图片格式)， ???????w：一个是文件压缩的后宽度，宽度越小，字节越小 ???????objDiv：一个是容器或者回调函数 ???????photoCompress() ????????*/ ?????function photoCompress (file, w, objDiv) { ???????const ready = new FileReader() ???????/* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容. */ ???????ready.readAsDataURL(file) ???????ready.onload = function () { ?????????let re = this.result ?????????canvasDataURL(re, w, objDiv) ???????} ?????} ?????function canvasDataURL (path, obj, callback) { ???????var img = new Image() ???????img.src = path ???????img.onload = function () { ?????????var that = this ?????????// 默认按比例压缩 ?????????var w = that.width ?????????var h = that.height ?????????var scale = w / h ?????????w = obj.width || w ?????????h = obj.height || (w / scale) ?????????var quality = 0.7 // 默认图片质量为0.7 ?????????// 生成canvas ?????????var canvas = document.createElement(‘canvas‘) ?????????var ctx = canvas.getContext(‘2d‘) ?????????// 创建属性节点 ?????????var anw = document.createAttribute(‘width‘) ?????????anw.nodeValue = w ?????????var anh = document.createAttribute(‘height‘) ?????????anh.nodeValue = h ?????????canvas.setAttributeNode(anw) ?????????canvas.setAttributeNode(anh) ?????????ctx.drawImage(that, 0, 0, w, h) ?????????// 图像质量 ?????????if (obj.quality && obj.quality <= 1 && obj.quality > 0) { ???????????quality = obj.quality ?????????} ?????????// quality值越小，所绘制出的图像越模糊 ?????????var base64 = canvas.toDataURL(‘image/jpeg‘, quality) ?????????// 回调函数返回base64的值 ?????????callback(base64) ???????} ?????} ?????/** ????????* 将以base64的图片url数据转换为Blob ????????* param urlData ????????* ???????????用url方式表示的base64图片数据 ????????*/ ?????function convertBase64UrlToBlob (urlData) { ???????var arr = urlData.split(‘,‘) ???????let mime = arr[0].match(/:(.*?);/)[1] ???????let bstr = atob(arr[1]) ???????let n = bstr.length ???????let u8arr = new Uint8Array(n) ???????while (n--) { ?????????u8arr[n] = bstr.charCodeAt(n) ???????} ???????return new Blob([u8arr], {type: mime}) ?????} ?????if (file.size > 1024 * 1024) { ???????photoCompress(file, {quality: 0.2}, (base64Codes) => { ?????????var bl = convertBase64UrlToBlob(base64Codes) ?????????formData.append(‘file‘, bl, ‘file_‘ + Date.parse(new Date()) + ‘.jpg‘) // 文件对象 ?????????this.uploadImg(formData) ???????}) ?????} else { ???????// append 文件 ???????formData.append(‘file‘, file) ???????formData.append(‘tag‘, ‘repair‘) ???????// 上传图片 ???????this.uploadImg(formData) ?????} ???}, ???transformFileToDataUrl (file) { ?????const formData = new FormData() ?????// 自定义formData中的内容 ?????// append 文件 ?????formData.append(‘file‘, file) ?????formData.append(‘tag‘, ‘repair‘) ?????// 上传图片 ?????this.uploadImg(formData) ???}, ???// 上传图片 ???uploadImg (formData) { ?????const xhr = new XMLHttpRequest() ?????// 进度监听 ?????// xhr.upload.addEventListener(‘progress‘, (e) => { console.log(e) }, false) ?????// 加载监听 ?????// xhr.addEventListener(‘load‘, ()=>{console.log("加载中");}, false); ?????// 错误监听 ?????const that = this ?????xhr.addEventListener(‘error‘, () => { ???????// debugger ???????that.count-- ?????}, false) ?????xhr.onreadystatechange = function () { ???????if (xhr.readyState === 4) { ?????????const result = JSON.parse(xhr.responseText) ?????????if (xhr.status === 200 && result.code === 0) { ???????????// that.picData.push(result.data) ???????????// 上传成功 ???????????that.uploadImgArr.push(result.data.url) ???????????console.log(result) ???????????Toast({ ?????????????message: ‘图像上传成功‘, ?????????????className: ‘hint-message‘ ???????????}) ???????????console.log(‘上传头像成功‘) ?????????} else { ???????????// 上传失败 ?????????} ???????} ?????} ?????xhr.open(‘POST‘, process.env.API_HOME + ‘/file/upload‘, true) ?????xhr.setRequestHeader(‘Authorization‘, window.localStorage.header_token) ?????// xhr.open(‘POST‘,‘http://sandbox.gw.fdc.com.cn/homeworkstationapi/homeworkstationapi.restful.inter.img.batchupload‘,true) ?????// xhr.open(‘POST‘, ‘http://esf.basetest.fdc.com.cn/homeworkstation/homeworkstation.base.housesourceimg.batchupload‘, true) ?????xhr.send(formData) ?????that.changeimg = false ???},