FormData表單圖片壓縮、上傳
阿新 • • 發佈:2018-12-15
// 圖片上傳 // 使用方法 mounted () { uploadFile.upload(id (input的id), (item) => {})} methods: { document.getElementById(id) } const uploadFile = { upload: function (id, callback) { let file = null let el = null let i = 0 // var formData = new FormData() el = document.getElementById(id) el.addEventListener('change', function (e) { i++ if (i !== 1) { return false } else { i = 0 file = this.files[0] if (file.size / 1024 / 1024 > 10) { alert('圖片大小不能超過10MB') return false } imgResize(file, callback1, callback) } }) document.getElementById(id).click() return callback } } function imgResize (file, callback1, callback) { var fileReader = new FileReader() fileReader.onload = function () { var IMG = new Image() IMG.src = this.result IMG.onload = function () { var w = this.naturalWidth var h = this.naturalHeight var resizeW = 0 var resizeH = 0 // maxSize 是壓縮的設定,設定圖片的最大寬度和最大高度,等比縮放,level是報錯的質量,數值越小質量越低 var maxSize = { width: 700, height: 700, level: 0.9 } console.log(file) if (w > maxSize.width || h > maxSize.height) { var multiple = Math.max(w / maxSize.width, h / maxSize.height) resizeW = w / multiple resizeH = h / multiple } else { // 如果圖片尺寸小於最大限制,則不壓縮直接上傳 return callback1(file, callback) } var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') if (window.navigator.userAgent.indexOf('iPhone') > 0) { canvas.width = resizeH canvas.height = resizeW ctx.rorate(90 * Math.PI / 180) ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH) } else { canvas.width = resizeW canvas.height = resizeH ctx.drawImage(IMG, 0, 0, resizeW, resizeH) } var base64 = canvas.toDataURL('image/jpeg', maxSize.level) convertBlob(window.atob(base64.split(',')[1]), callback1, callback) } } fileReader.readAsDataURL(file) } function convertBlob (base64, callback1, callback) { var buffer = new ArrayBuffer(base64.length) var ubuffer = new Uint8Array(buffer) for (var i = 0; i < base64.length; i++) { ubuffer[i] = base64.charCodeAt(i) } var blob try { blob = new Blob([buffer], {type: 'image/jpg'}) } catch (e) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder if (e.name === 'TypeError' && window.BlobBuilder) { var blobBuilder = new Blob() blobBuilder.append(buffer) blob = blobBuilder.getBlob('image/jpg') } } callback1(blob, callback) } function callback1 (fileResize, callback) { var data = new FormData() data.append('file', fileResize, 'test.jpg') // 回撥 資料請求 callback(data) } export default uploadFile