html 部分
<input type = "file" id="file" ref="file" name="file" accept="image/gif, image/jpeg" @change="uploadChange"/>
<img src="" alt="" id="appealimg" />
js 部分
getBase64: function (file, callback) {
var maxWidth = 640
if (file.files && file.files[0]) {
var thisFile = file.files[0]
// if (thisFile.size > 524288) {
// this.showToast("图片不能超过512k！");
// return;
// }
var reader = new FileReader()
reader.onload = function (event) {
var imgUrl = event.target.result
var img = new Image()
img.onload = function () {
var canvasId = 'canvasBase64Imgid',
canvas = document.getElementById(canvasId)
if (canvas != null) {
document.body.removeChild(canvas)
}
var canvas = document.createElement('canvas')
canvas.innerHTML = 'New Canvas'
canvas.setAttribute('id', canvasId)
canvas.style.display = 'none'
document.body.appendChild(canvas)
canvas.width = this.width
canvas.height = this.height
var imageWidth = this.width,
imageHeight = this.height
if (this.width > maxWidth) {
imageWidth = maxWidth
imageHeight = this.height * maxWidth / this.width
canvas.width = imageWidth
canvas.height = imageHeight
}
var context = canvas.getContext('2d')
context.clearRect(0, 0, imageWidth, imageHeight)
context.drawImage(this, 0, 0, imageWidth, imageHeight)
var base64 = canvas.toDataURL('image/png', 1)
var imgbase = base64.substr(22)
callback(imgbase)
// this.imgUrl =
}
img.src = imgUrl
}
reader.readAsDataURL(file.files[0])
}
},
uploadChange: function (event) {
if (event.target.files.length > 0) {
this.files = event.target.files[0] // 提交的图片
this.getBase64(event.target, url => {
document.getElementById("appealimg1").src='data:image/png;base64,' + url
})
}
this.isShowUp = false
}
以上代码，只能上传单张照片，如果需要在同一界面上传多张照片，就要再写一个函数，用新的函数接收下标值，来判断当前点击的是哪一张，在调用uploadChange函数的函数，后面就可以拼接下标值了
