图片上传以及图片压缩
Posted nanacln
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传以及图片压缩相关的知识,希望对你有一定的参考价值。
html:
<input type="file" class="reply-thumb__input" name="image" accept="image/*" @change=‘handleInputChange‘ />
js:
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 },
以上是关于图片上传以及图片压缩的主要内容,如果未能解决你的问题,请参考以下文章
asp微信jssdk上传图片,asp上传自动压缩图片,是通过微信上传的