vue框架中用并上传canvas压缩图片

直接上代码

<input value="上传" ref="file" type="file" multiple @change="getFiles">

这里要注意的是上传代码的操作要在Image实例的onload方法中，并且是在canvas转化过后获取到canvas新图片之后。
在Image实例的onload之外是获取不到canvas的打印出来的是null，我将转化后的base64赋值给vue的data数据中也获取不到

getFiles () {
    var that = this
    var img = new Image()

    //获取原图的base64
    var reader = new FileReader()
    reader.onload = function(e) {
        img.src = e.target.result
    }
    reader.readAsDataURL(that.$refs.file.files[0])

    img.onload = function() {
        // 当图片宽度超过 700px 时, 就压缩成 700px, 高度按比例计算 // 压缩质量可以根据实际情况调整
        var w = Math.min(700, img.width);
        var h = img.height * (w / img.width);
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = w
        canvas.height = h
        ctx.drawImage(img, 0, 0, w, h)
        that.url = canvas.toDataURL('image/png',1)//将canvas转成base64第二个参数是设置质量（越大越好最大1）

        var FormDataImg = new FormData()
        FormDataImg.append('file', that.$refs.file.files[0])//原图上传
        FormDataImg.append('base64', that.url)
        that.$toast.loading({
            duration: 0,
            message: '上传中...',
            loadingType: 'spinner'
        })
        axios({
            url: 'http://192.168.0.175:3030/test/uploadFile',
            method: 'post',
            data: FormDataImg,
            header: {'Content-Type': 'multipart/form-data'}
        }).then(res => {
            that.$toast.clear()
            that.$toast('上传成功')
            that.imgurl = res.data.data1
        }).catch(err => {
            that.$toast.clear()
            that.$toast('上传错误')
        })
    }
    console.log(this.url)
}