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

最新推荐文章于 2024-05-27 17:14:33 发布

涛々

最新推荐文章于 2024-05-27 17:14:33 发布

阅读量7.1k

点赞数 1

分类专栏： JS 前端文章标签：阿里云对象存储oss 上传文件图片压缩 oss 浏览器兼容es6

本文链接：https://blog.csdn.net/qq_23375733/article/details/86594420

版权

前端同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

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

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

下面直接贴代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- layui框架 -->
    <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>
    
    <!-- 以下是为了兼容浏览器 可以使用ES6语法 -->
    <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类型必须要写这个 type="text/babel" -->
    <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

下载完后 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

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

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

涛々

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
web前端图片压缩后上传到阿里云oss

当项目中有图片上传功能时，一般公司都是使用第三方的存储平台，这样便不会产生自己服务器资源占用问题，为避免上传图片太大占用太多空间，提高用户访问的速度，需要将图片进行压缩之后再存储。下面直接贴代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- la...
复制链接

扫一扫