// 图片上传
// 使用方法 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
FormData表单图片压缩、上传
猜你喜欢
转载自blog.csdn.net/Ajaxguan/article/details/84063786
今日推荐
周排行