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

梦里梦外; 2022-05-31 14:16 224阅读 0赞

之前开发多页面应用时，用的是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>
    
    
    <style scoped> </style>