oss使用ImageManagerStatic压缩之后上传图片结合layui前端-优快云博客

本文链接：https://blog.youkuaiyun.com/x007008009/article/details/122977384

该博客详细介绍了如何使用阿里云OSS服务进行图片上传，并结合ThinkPHP框架处理上传流程。后端首先获取上传文件信息，进行压缩并保存到服务器，再上传到OSS。前端通过JavaScript实现图片预览、选择和上传功能，同时展示了HTML和CSS样式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require_once "../extend/oss/autoload.php";
use OSS\OssClient;
use OSS\Core\OssException;

use think\Config;
use think\Log;
use think\Session;
use Intervention\Image\ImageManagerStatic as ImageHandle;

后台接收的$_FILES; 才能接收到
获取到上传文件的信息得到临时路径压缩之后保存到服务器然后在上传到oss

    /**
     * 上传图片
     *
     * @param Request $request
     * @return void
     */
    public function uploadImage(Request $request)
    {
     

        $header = apache_request_headers();
        if (empty($header['Orderid'])){
            self::Notice();
        }
        $orderId = $header['Orderid'];  //订单号

        //oss参数
        $oss = Config::get("oss");

        $accessKeyId = $oss['accessKey'];		// Access Key ID
        $accessKeySecret = $oss['secretKey'];	// Access Key Secret
        $endpoint = $oss['domain'];				// 阿里云oss 外网地址endpoint 点击你的bucket  进来后点击概述 访问域名第一个 Endpoint（地域节点）
        $bucket = $oss['bucket'];				// Bucket名称

        $files = $_FILES;

        //循环插入上传 插入数据库
        $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
        foreach ($files as $key => $val) {

            $zero = explode("." , $val['name']);
            $suffix =  $zero[count($zero)-1];
            
            $savename = $orderId .'-'.md5($key . time() . round(1000 , 9999)) . "." . $suffix;

            $img = ImageHandle::make($val['tmp_name'])->resize(210, 210);

            $filePath =  "admin" ."/" . md5($key .time() . round(1000 , 9999)). ".". $suffix;
            $img->save($filePath);

            try {
                $result = $ossClient->uploadFile($bucket, $savename, $filePath);

                unlink($filePath);   //删除保存的照片（也可以制定脚本 定期删除）
    
                $tmp['ImageUrl'] = $result['info']['url'];
                $tmp['type'] = 1;
                $tmp['time'] = time();
                $tmp['orderId'] = $orderId;
                $tmp['adminId'] = Session::get("uid");
    
                Db::table("1035_orders_image")->insert($tmp);
            } catch (OssException $e) {
                // var_dump("出错了");
                // print_r($e->getMessage() . "\n");
                self::apiSuccess([
                    'msg' => '上传失败 请联系管理员'
                ],500);
            }

        }
        self::apiSuccess([
            'msg' => '上传成功'
        ]);
    }

前端的代码

<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: Aidam_Bo
 * @Date: 2022-01-12 11:56:07
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2022-02-17 10:16:02
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>公司列表页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    {include file="../application/admin/view/public/pub.html" /}
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .rights {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

        }
    </style>


</head>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上传多图片页面</title>
    <!-- <link rel="stylesheet" href="../layui/css/layui.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #formdata {
            max-width: 852px;
            margin: 0 auto
        }

        .btn {
            border-radius: 0px;
            font-weight: 100;
            cursor: pointer;
            display: inline-block;
            padding: 5px;
            font-size: 14px;
            font-family: '微软雅黑'
        }

        .btn-primary {
            color: #fff;
            text-shadow: 0 1px rgba(0, 0, 0, .1);
            background-image: -webkit-linear-gradient(top, #4d90fe 0, #4787ed 100%);
            background-image: -o-linear-gradient(top, #4d90fe 0, #4787ed 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#4787ed));
            background-image: linear-gradient(to bottom, #4d90fe 0, #4787ed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #3079ed;
        }

        .btn-success {
            color: #fff;
            text-shadow: 0 1px rgba(0, 0, 0, .1);
            background-image: -webkit-linear-gradient(top, #35aa47 0, #35aa47 100%);
            background-image: -o-linear-gradient(top, #35aa47 0, #35aa47 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#35aa47),
                    to(#35aa47));
            background-image: linear-gradient(to bottom, #35aa47 0, #35aa47 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff35aa47',
                    endColorstr='#ff35aa47', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #359947;
        }

        .gallery .img-item {
            position: relative;
            cursor: pointer;
        }

        .gallery .img-item .delete {
            position: absolute;
            display: block;
            width: 20px;
            height: 20px;
            color: #fff;
            background: rgba(232, 0, 0, 0.7);
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            top: 25px;
            right: 25px;
            cursor: pointer;
        }

        .img {
            width: 100px;
            height: 100px;
            margin: 20px;
            cursor: pointer;
        }

        .btn-upload {
            margin: 20px;
            float: left;
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            background: #ebebeb;
            line-height: 100px;
            font-size: 14px;
            text-align: center;
            color: #808080;
            cursor: pointer;
        }

        .box {
            width: 100%;
            height: 100%;
            background: #333;
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 0 auto;
            align-items: center;
            /*定义body的元素垂直居中*/
            justify-content: center;
            /*定义body的里的元素水平居中*/
            display: none;
            overflow: hidden
        }

        .box img {
            width: 100%;
            position: absolute;
        }
    </style>



</head>

<body>
    <form class="layui-form layui-form-pane" id="formdata" method="post" enctype="multipart/form-data">
        <!-- 上传图片模块 -->
        <div style="padding: 20px; font-size: 30px; ">上传图片</div>
        <!-- <form id="formdata" method="post" enctype="multipart/form-data"> -->
        <div class="gallery" id="gallery">
            <div class="img-item" style="display: inline-block;" id="first-btn-upload">
                <label for="btn-upload" class="btn-upload" id="btn-upload">点击上传</label>
                <div style="clear: both;"></div>
            </div>
        </div>
        <input id="file" type="file" multiple style="display: none">
        <!-- </form> -->
        <div class="box">
            <img src="" />
        </div>

        <div style="padding: 20px; font-size: 30px; ">
            <button class="layui-btn" lay-submit lay-filter="uploadpic" style="display: none" id="uploadpic">上传</button>
        </div>


        </div>
    </form>
   
    <button class="layui-btn" onclick="upload()">上传</button>
    <input type="file" id='p_image' accept="image/*" capture='camera' style="opacity: 0" />
    <img id="tempImage" src="" style="display:none;" />

    <div id="showHistory"></div>

    <script>

        var orderId = getQueryVariable("orderId")
        // 保存证照执法
        function upload () {
            $("#uploadpic").click();
        }

        $(function () {
            zero()
        })
        //获取已有的照片 列表展示
        function zero(){
            layui.use('form', function () {
                var form = layui.form;
                var layer = layui.layer;
                $.ajax({
                    type: 'post',
                    url: '/admin/Image/getImageList', // ajax请求路径
                    data: { 'Orderid': orderId },
                    async: false,
                    dataType: "json",
                    success: function (result) {
                        // console.log(result)
                    
                        if (result.errorCode == 200) {

                            var html = ''
                            html += '<ul class="layui-timeline">'
                            var len = result.data.length
                            var data = result.data
                            for (var i = 0; i < len; i++) {
                                // console.log(data[i].ImageUrl)
                                if ( data[i].type== 1) {    //后台上传
                                    html += '<li class="layui-timeline-item" style="background:#E3FBFC;">';
                                    html += '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                                    html += '<div class="layui-timeline-content layui-text">';
                                    html += '  <h3 class="layui-timeline-title">'+ data[i].time +'--<span style="font-size: 26rpx;color: red;">'+ data[i].name  +'(后台客服上传)</span></h3>';
                                    html += '<p>';
                                    html += '<img src=' + data[i].ImageUrl + '>';
                                    html += '</p>';
                                    html += '</div>';
                                    html += '</li>';
                                } else {    //前台客户自己上传'
                                    html += '<li class="layui-timeline-item">';
                                    html += '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                                    html += ' <div class="layui-timeline-content layui-text">';
                                    html += ' <h3 class="layui-timeline-title">'+  data[i].time +'(用户自己上传)</h3>';
                                    html += '<p>';
                                    html += '<img src=' + data[i].ImageUrl + '>';
                                    html += '</p>';
                                    html += '</div>';
                                    html += '</li>';
                                }
                            }
                            html += '</ul>'

                            // console.log(html)

                            $("#showHistory").html(html)
                        } else {
                            layer.msg(result.msg)
                        }
                        // location.reload(); 
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg("发生错误!");
                    }
                });
                return false
            })
        }

        $(function () {
            layui.use('form', function () {
                var form = layui.form;
                var layer = layui.layer;
                //监听提交
                form.on('submit(uploadpic)', function (data) {
                    layui.use('jquery', function () {
                        var $ = layui.$;
                        // 创建FormData根据form
                        var uploaddata = new FormData($("#formdata")[0]);
                        // 遍历图片数组把图片添加到FormData中
                        // var files = document.getElementById("file").files;
                        var maxsize = 0;
                        for (var i = 0; i < files.length; i++) {
                            uploaddata.append("file"+ i, files[i]);
                            maxsize = maxsize + files[i].size;
                        }

                        if (maxsize > 52428800) {
                            layer.msg('上传的文件总大小不能超过50MB，请重新上传！');
                            return;
                        }
                        $.ajax({
                            type: 'post',
                            url: '/admin/Image/uploadImage', // ajax请求路径
                            data: uploaddata,
                            async: false,
                            // dataType:"json",
                            contentType: false,
                            processData: false,
                            headers: { 'Orderid': orderId },
                            beforeSend:function(){
                                loading()
                            },
                            success: function (data) {
                                // console.log(data)
                                // return false
                                layer.msg(data.msg, {
                                    icon: 6, time: 1500, shade: 0.4
                                }, function () {
                                    layer.closeAll();//疯狂模式，关闭所有层
                                    location.reload();
                                });

                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                layer.msg("发生错误!");
                            }
                        });
                    });
                    return false;//禁止跳转，否则会提交两次，且页面会刷新

                });
            });
        })

        // 预览
        function preView (obj) {
            var pimg = obj;
            // var pimg = document.querySelector("img");
            var oImg = document.querySelector(".box img");
            var oBox = document.querySelector(".box");
            // pimg.οnclick=function(){
            oBox.style.display = "flex"
            oImg.src = pimg.src
            // }
            oBox.onclick = function () {
                oBox.style.display = "none"
                oImg.src = ''
            }
            var hammer = new Hammer(oImg);//hammer实例化
            hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });//激活pan(移动)功能
            hammer.get('pinch').set({ enable: true });//激活pinch(双指缩放)功能
            hammer.on("panstart", function (event) {
                var left = oImg.offsetLeft;
                var tp = oImg.offsetTop;
                hammer.on("panmove", function (event) {
                    oImg.style.left = left + event.deltaX + 'px';
                    oImg.style.top = tp + event.deltaY + 'px';
                });
            })

            hammer.on("pinchstart", function (e) {
                hammer.on("pinchout", function (e) {
                    oImg.style.transition = "-webkit-transform 300ms ease-out";
                    oImg.style.webkitTransform = "scale(2.5)";
                });
                hammer.on("pinchin", function (e) {
                    oImg.style.transition = "-webkit-transform 300ms ease-out";
                    oImg.style.webkitTransform = "scale(1)";
                });
            })
        }

        // 创建数组保存图片
        var files = new Array();
        var id = 0;
        // 选择图片按钮隐藏input[file]
        $("#btn-upload").click(function () {
            $("#file").trigger("click");
        });
        // 选择图片
        $("#file").change(function () {
            // 获取所有图片
            var img = document.getElementById("file").files;
            // 遍历
            for (var i = 0; i < img.length; i++) {
                // 得到图片
                var file = img[i];
                // 判断是否是图片
    
                var flag = judgeImgSuffix(file.name);
        
                if (flag) {

                } else {
                    alert("要求图片格式为png,jpg,jpeg,bmp");
                    return;
                }

                // 把图片存到数组中
                files[id] = file;
                id++;
                // 获取图片路径
                var url = URL.createObjectURL(file);

                // 创建img
                var box = document.createElement("img");
                box.setAttribute("src", url);
                box.className = 'img';
                box.onclick = function () {
                    preView(this);
                };

                // 创建div
                var imgBox = document.createElement("div");
                imgBox.style.float = 'left';
                imgBox.className = 'img-item';

                // 创建span
                var deleteIcon = document.createElement("span");
                deleteIcon.className = 'delete';
                deleteIcon.innerText = 'x';
                // 把图片名绑定到data里面
                deleteIcon.id = img[i].name;
                // 把img和span加入到div中
                imgBox.appendChild(deleteIcon);
                imgBox.appendChild(box);
                // 获取id=gallery的div
                var body = document.getElementsByClassName("gallery")[0];
                // body.appendChild(imgBox);
                var showPlace = document.getElementsByClassName("img-item")[0];
                body.insertBefore(imgBox, showPlace);
                // 点击span事件
                $(deleteIcon).click(function () {
                    // 获取data中的图片名
                    var filename = $(this).attr('id');
                    // 删除父节点
                    $(this).parent().remove();
                    var fileList = Array.from(files);
                    // 遍历数组
                    for (var j = 0; j < fileList.length; j++) {
                        // 通过图片名判断图片在数组中的位置然后删除
                        if (fileList[j].name == filename) {
                            fileList.splice(j, 1);
                            id--;
                            break;
                        }
                    }
                    files = fileList;
                });
            }
        });

        // 判断是否是图片类型
        function judgeImgSuffix (path) {
            var index = path.lastIndexOf('.');
            var suffix = "";
            if (index > 0) {
                suffix = path.substring(index + 1);
            }
            if ("png" == suffix || "jpg" == suffix || "jpeg" == suffix || "bmp" == suffix || "PNG" == suffix || "JPG" == suffix || "JPEG" == suffix || "BMP" == suffix) {
                return true;
            } else {
                return false;
            }
        }
        //根据url 获取参数
        function getQueryVariable (variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

    </script>
</body>

</html>


</html>