专栏首页swag codeSSM框架结合LayUi文件上传模块接入COS对象存储服务

SSM框架结合LayUi文件上传模块接入COS对象存储服务


简介

在日常项目开发中经常会用到图片,视频等文件存储的操作,但是文件如果一直存放在本地服务器中,可以会导致资源浪费,且访问速度也有所限制,这时我们就会考虑CDN加速云端存储等方式来解决问题,这里就要介绍下本文用到的COS对象存储-安全稳定、海量、便捷、低延迟、低成本的云端存储服务。

COS对象存储

对象存储(Cloud Object Storage,COS)是腾讯云提供的面向非结构化数据,支持 HTTP/HTTPS 协议访问的分布式存储服务,它能容纳海量数据并保证用户对带宽和容量扩充无感知,可以作为大数据计算与分析的数据池。腾讯云 COS 提供网页端管理界面、多种语言的 SDK 以及命令行和图形化工具,并且完全兼容 S3 的 API 接口,方便用户直接使用社区工具和插件,COS 还可以和其他云产品结合,比如利用 CDN 的全球节点提供加速服务,利用数据万象的图片处理能力提供一站式图片解决方案等(详细介绍)

案例实现

  • 本文使用的是腾讯云提供的COS服务,每个月提供50G存储容量,10G流量,对于一般的博客网站,以及项目测试来说绰绰有余
  • 腾讯云对象存储 COS 除了提供多种 API 接口,还提供了丰富多样的 SDK 供开发者使用,如Java、Python、Js等…,本项目后台基于SpringMVC实现,前端通过LayUi框架的文件上传模块结合实现
  • 存储桶相应的还有防盗链设置,跨域规则设置,读写权限设置,以及相应的CDN加速服务

代码

package cn.mall.controller.portal;

import cn.mall.common.ServerResponse;
import cn.mall.util.PropertiesUtil;
import com.qcloud.cos.COSClient;
import com.qcloud.cos.ClientConfig;
import com.qcloud.cos.auth.BasicCOSCredentials;
import com.qcloud.cos.auth.COSCredentials;
import com.qcloud.cos.model.PutObjectRequest;
import com.qcloud.cos.model.PutObjectResult;
import com.qcloud.cos.region.Region;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
@RequestMapping("/upload/")
public class UploadController {

    //密钥请前往腾讯云后台查询
    private static String secretId="*************";
    private static String secretKey="*************";
    private static String bucketName="你的存储桶名称";
    private static String RegionName="存储桶所属地域";
    /**
     * 文件上传
     * @param file
     * @param session
     * @return
     */
     
    @RequestMapping(value = "upload_image_cos.do",method = RequestMethod.POST)
    @ResponseBody
    public Object Upload(@RequestParam(value = "file") MultipartFile file, HttpSession session){
        if(file == null){
            return new UploadMsg(0,"文件为空",null);
        }
        //获取文件上传原名
        String oldFileName = file.getOriginalFilename();
        String eName = oldFileName.substring(oldFileName.lastIndexOf("."));
        //通过UUID随机生成新的文件名
        String newFileName = UUID.randomUUID()+eName;
 
        // 1 初始化用户身份信息(secretId, secretKey)
        COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
        // 2 设置bucket的区域, COS地域的简称请参照 https://cloud.tencent.com/document/product/436/6224
        ClientConfig clientConfig = new ClientConfig(new Region(RegionName));
        // 3 生成cos客户端
        COSClient cosclient = new COSClient(cred, clientConfig);
        // bucket的命名规则为{name}-{appid} ,此处填写的存储桶名称必须为此格式
        String bucketName = this.bucketName;

        // 简单文件上传, 最大支持 5 GB, 适用于小文件上传, 建议 20 M 以下的文件使用该接口
        // 大文件上传请参照 API 文档高级 API 上传
        File localFile = null;
        try {
            //创建临时文件
            localFile = File.createTempFile("temp",null);
            file.transferTo(localFile);
            // 指定要上传到 COS 上的路径
            String key = PropertiesUtil.getProperty("cos_key_name")+newFileName;
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, localFile);
            PutObjectResult putObjectResult = cosclient.putObject(putObjectRequest);
        return new UploadMsg(1,"上传成功", newFileName);
        } catch (IOException e) {
            return new UploadMsg(-1,e.getMessage(),null);
        } finally {
            // 关闭客户端(关闭后台线程)
            cosclient.shutdown();
        }
    }

    //自定义JSON消息体
    private class UploadMsg {
        public int status;
        public String msg;
        public String path;

        public UploadMsg() {
            super();
        }

        public UploadMsg(int status, String msg,String path){
            this.status =status;
            this.msg =msg;
            this.path =path;
        }
    }

}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <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="../assets/layui/css/layui.css">

</head>
<body>
<form class="layui-form column-content-detail">

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-form-item">
                <label class="layui-form-label">商品标题:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入商品标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类:</label>
                <div class="layui-input-block">
                    <select name="categoryId" lay-verify="required">
                        <option value="">请选择分类</option>
                        <option value="100001">家用电器</option>
                        <option value="100002">数码3C</option>
                        <option value="100003">服装箱包</option>
                        <option value="100004">食品生鲜</option>
                        <option value="100005">酒水饮料</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图像上传:</label>
                <div class="layui-input-block">
                    <img id="upload_img" src="../images/default_img.png" width="100" height="100">
                    <button type="button" class="layui-btn" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">商品介绍:</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea layui-hide" name="detail" lay-verify="detail" id="LAY_demo_editor"></textarea>
                </div>
            </div>
            <input type="hidden" id="mainImage" name="mainImage" required value="default_img.png"  class="layui-input">
            <input type="hidden" id="status" name="status" value="1" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存:</label>
                <div class="layui-input-block">
                    <input type="text" name="stock" required lay-verify="number" placeholder="请输入商品库存" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格:</label>
                <div class="layui-input-block">
                    <input type="text" name="price" required lay-verify="number" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>
    </div>

    <div class="layui-form-item" style="padding-left: 10px;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add_product">立即提交</button>
            <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="../js/cos-js-sdk-v5.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../assets/layui/layui.all.js"></script>
<script>
    layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'element', 'upload', 'layedit'], function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laypage = layui.laypage,
            laydate = layui.laydate,
            layedit = layui.layedit,
            element = layui.element,
            upload=layui.upload;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor', {
            tool: ['strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线
                , '|' //分割线
                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐
                , 'link' //超链接
                , 'unlink' //清除链接
                , 'image' //插入图片
            ],
            height: 100
        });
       
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url:'../upload/upload_image_cos.do'//后台上传接口
            ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                layer.msg('上传中',{icon: 16,time:0,shade:0.01});
            }
            ,done: function(res, index, upload){
                layer.closeAll('loading');
                //status=1代表上传成功
                if(res.status == 1){
                    layer.msg("上传成功",{icon:1});
                //do something (比如将res返回的图片链接保存到表单的隐藏域)
                    $('#upload_img').attr('src','https://sr-1251242863.cos.ap-shanghai.myqcloud.com/webdemo/images/'+res.path);
                    $('#mainImage').val(res.path);
                }

                //获取当前触发上传的元素,一般用于 elem 绑定 class 的情况,注意:此乃 layui 2.1.0 新增
                var item = this.item;
                //文件保存失败
                //do something
            }
            ,error: function(){
                layer.closeAll('loading');
                //请求异常回调
                layer.msg("上传失败,请重试",{icon:2});
            }
            ,size:2048 //文件大小限制
            ,number:1 //文件数量限制
            ,accept: 'images' //文件类型限制
            ,acceptMime: 'image/jpg, image/png' //选择窗口属性
        });
    });
</script>
</body>
</html>

动图演示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 双缓冲原理在Awt和Swing中实现消除闪烁方法总结

    AWT是抽象窗口工具箱的缩写,它为编写图形用户界面提供了用户接口,通过这个接口就可以继承很多方法,省去了很多工作。AWT还能使应用程序更好地同用户进行交互。

    sr
  • Spring框架入门(二):安装配置

    这里以4.3.20版本为例,点击下载:SpringFramewoek 4.3.20版本

    sr
  • 荷兰国旗-快速排序应用

    这样就可以使用“荷兰国旗问题”的解法来解决快速排序了,这样一来,即使待排序的元素中有一些元素和key一样,也能保证时间复杂度是最差是NlogN的,因为对于待排序...

    sr
  • MongoDB助力一个物流订单系统

    我们都知道MongoDB是一款非常出色的非关系型文档数据库,你肯定会想问MongoDB这么强,我们该怎么用或者有啥运用场景呢? MongoDB的应用场景非常多,...

    bigsai
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • layui修改 form表单的 长度

    Little JAVA
  • layui响应式导航(菜单)

    今天来分享一套自己写的layui响应式导航栏菜单,网络上搜索无果,只能自己写了,现在分享出来。

    申霖
  • 表单数据验证方法(一)—— 使用validate.js实现表单数据验证

     好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术,但能起到巩固自己和稍...

    CherishTheYouth
  • 总结一下laravel中Hash::make()遇到的坑

    ==这里遇到的坑就是laravel框架中,每次hash的值都是不一致的,跟之前写过的md5不一样,md5是唯一的,但是只要保存进去了,就算hash以后的值是不一...

    一个淡定的打工菜鸟
  • .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务

    连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜...

    依乐祝

扫码关注云+社区

领取腾讯云代金券