web前端图片压缩后上传到阿里云oss

柔情只为你懂 2022-03-24 15:58 669阅读 0赞

当项目中有图片上传功能时，一般公司都是使用第三方的存储平台，这样便不会产生自己服务器资源占用问题，

为避免上传图片太大占用太多空间，提高用户访问的速度，需要将图片进行压缩之后再存储。

下面直接贴代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        
        <link rel="stylesheet" href="./css/layui.css">
        <script type="text/javascript" src="./js/layui.js"></script>
        <title>图片压缩上传到阿里云oss</title>
    </head>
    <body>
        <input style="width:106px;height:38px;" id="file" type="file" accept="image/jpeg,image/jpg,image/png" />
        
        
        <script type="text/javascript" src="./compression.js"></script>
        
        
        <script type="text/javascript" src="./browser.min.js"></script>
        <script type="text/javascript" src="./polyfill.min.js"></script>
        <script type="text/javascript" src="./aliyun-oss-sdk.min.js"></script>
        
        <script type="text/babel">
            $("#file").on("change", function (e) {
                var file = document.getElementById("file").files[0];
                var val = document.getElementById("file").value;
                var suffix = val.substr(val.indexOf(".")); //文件后缀名
    
                if (suffix == '' || suffix == null) return;
                if (suffix != '.jpg' && suffix != '.png' && suffix != '.jpeg') {
                    $('#file').val("");
                    layer.msg('只能选择后缀名为jpg/png/jpeg的图片文件', { icon: 0, time: 2000 });
                    return;
                }
    
                if (file.size >= 3 * 1024 * 1024) {
                    layer.msg('上传的图片大小不能超过3M', { icon: 0, time: 2000 });
                    return;
                }
    
                layer.load(); //加载框
                //文件预览
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    //阿里云对象存储上Bucket下的具体的文件地址
                    var storeAs = 'central/lunbo/' + timestamp() + suffix;
                    
                    //当前图片小于1M 原图上传 否则压缩上传
                    if (file.size / 1024 <= 1024) {
                        async function putBlob() {
                            //上传Blob数据
                            let result = await client.put(storeAs, file);
                            layer.closeAll('loading');
                            $('#file').val("");
                            console.log(result.url); //当前图片在阿里云上的路径
                        };
                        putBlob();
                    } else {
                        //压缩文件
                        photoCompress(file, { quality: 0.7 }, function (base64Codes) {
                            var blob = convertBase64UrlToBlob(base64Codes); //转为Blob类型
                            //上传文件
                            async function putBlob() {
                                let result = await client.put(storeAs, blob);
                                $('#file').val("");
                                layer.closeAll('loading');
                                console.log(result.url); //当前图片在阿里云上的路径
                            };
                            putBlob();
                        });
                    }
                }
            });
    
            /**
             * 生成文件名
             */
            function timestamp() {
                var time = new Date();
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var mm = time.getMinutes();
                var s = time.getSeconds();
                return "" + y + add(m) + add(d) + add(h) + add(mm) + add(s);
            }
    	
            function add(m) {
                return m < 10 ? '0' + m : m;
            }
        </script>
    </body>
    </html>

**ps：**这是只压缩图片质量，不压缩图片尺寸比例的。

**ps：**如果需要处理兼容浏览器可以使用es6语法的话，可以参照我这上面的写法来，

代码中的除了layui框架需要用到的文件外，其他的JS文件，我打包放在Github上了，需要的可以去下载，地址：

> [https://github.com/hujinchen/alyoss-compression][https_github.com_hujinchen_alyoss-compression]

下载完后 compression.js 里的client，需要改成你自己的

// 创建OSSClient实例
    let client = new OSS({
        region: '<Your region>',
        accessKeyId: '<Your AccessKeyId>',
        accessKeySecret: '<Your AccessKeySecret>',
        bucket: '<Your bucket name>'
    });

阿里云oss上传文件的官方文档地址：[https://help.aliyun.com/document\_detail/64047.html?spm=a2c4g.11186623.6.947.37b458d53ut7mQ][https_help.aliyun.com_document_detail_64047.html_spm_a2c4g.11186623.6.947.37b458d53ut7mQ]

还有很重要的一点，因为上传文件涉及到跨域的问题，所以需要在你自己的阿里云服务器上配置一下跨域规则，才能正常使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70][]

不懂什么意思的，直接参照我这样的配置，一般就可以了！

[https_github.com_hujinchen_alyoss-compression]: https://github.com/hujinchen/alyoss-compression
[https_help.aliyun.com_document_detail_64047.html_spm_a2c4g.11186623.6.947.37b458d53ut7mQ]: https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.947.37b458d53ut7mQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMzc1NzMz_size_16_color_FFFFFF_t_70]: /images/20220323/8df9c739d3294f30a9f775e2df038176.png