关于图片上传和利用canvas进行压缩

之前开发多页面应用时，用的是jQ插件。
现在，使用的是vue采用单页面模式，那么怎么上传呢？
用的相关技术是
前端

1.input file控件
2.file对象
3.FileReader对象
4.FormData对象
5.axios
6.canvas

后端
就按照相应的后台语言进行文件接收
代码

<template>
    <div>
        <form id="formid">
            <label for="resource">上传文档</label>
            <input @change="preview" type="file" id="resource" name="resource" ref="resource">
            <button type="button" @click="upload()">上传</button>
        </form>
        <div id="test" style="width:100px;height:100px">

        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    methods:{
        upload(){
            //file对象
            var file=this.$refs.resource.files[0]
            var formData = new FormData() // FormData 对象
            formData.append('file',file)
            this.$http.post('http://localhost/service/uploadImage', formData, {
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                transformRequest: [function (data) {
                    return data
                }],
                onUploadProgress: function(e) {
                    let percentage = Math.round((e.loaded * 100) / e.total) || 0
                    console.log(e, percentage)
                }
            }).then((response) => {
               // if (response.data.status) {} else {
                //}
            }).catch(function (error) {
                console.log(error)
            })
        },
        //预览并压缩
        preview(){
            var img = new Image();
            img.onload = function () {
                // 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
                // 压缩质量可以根据实际情况调整
                var w = Math.min(400, img.width);
                var h = img.height * (w / img.width);
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                // 设置 canvas 的宽度和高度
                canvas.width = w;
                canvas.height = h;

                // 把图片绘制到 canvas 中
                ctx.drawImage(img, 0, 0, w, h);

                // 取出 base64 格式数据
                var dataURL = canvas.toDataURL('image/png');

                $('#test').css('background', 'url('+dataURL+')');
            };
            var file=this.$refs.resource.files[0]
            //读取文件
            var reader = new FileReader();
            reader.onload = function(e){
                var data = e.target.result;
                img.src=data

            }
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(file);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>