springboot项目实现图片上传到七牛云步骤

最新推荐文章于 2024-09-26 14:47:12 发布

Wyangcsdb

最新推荐文章于 2024-09-26 14:47:12 发布

阅读量437

点赞数 2

本文链接：https://blog.csdn.net/Wyangcsdb/article/details/109602264

版权

详细步骤

个人如果不想把图片放到服务器，可以上传到七牛云上。加速图片访问，同时不占用图片空间。

申请七牛云账号并实名认证，申请存储空间

文章目录

详细步骤
导入maven依赖
编写七牛云工具类实现图片上传
编写工具类
- controller层
前台html和js

导入maven依赖

    <dependency>
        <groupId>com.qiniu</groupId>
        <artifactId>qiniu-java-sdk</artifactId>
        <version>[7.2.0, 7.2.99]</version>
    </dependency>

可以到七牛云控制台个人中心密钥管理获取Access_Key,和SECRET_KEY

编写七牛云工具类实现图片上传

BUCKETNAME是命名空间。

编写工具类

代码如下（示例）：

@Slf4j
public class QiniuUtils {

    // 设置需要操作的账号的AK和SK
    private static final String ACCESS_KEY = TestQiniuConfig.AK;
    private static final String SECRET_KEY = TestQiniuConfig.SK;

    // 要上传的空间名称
    private static final String BUCKETNAME = TestQiniuConfig.BUCKET;

    // 密钥
    private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

    // 外链默认域名
    private static final String DOMAIN = TestQiniuConfig.DOMAIN;

    /**
     * 将图片上传到七牛云
     */
    public static String uploadQNImg(FileInputStream file, String key) {
        // 构造一个带指定Zone对象的配置类, 注意这里的Zone.zone0需要根据主机选择
        Configuration cfg = new Configuration(Zone.zone2());
        // 其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);
        // 生成上传凭证，然后准备上传

        try {
         //    Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
            String upToken = auth.uploadToken(BUCKETNAME);
            try {
                Response response = uploadManager.put(file, key, upToken, null, null);
                // 解析上传成功的结果
                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);

                String returnPath = DOMAIN + "/" + putRet.key;
                // 这个returnPath是获得到的外链地址,通过这个地址可以直接打开图片
                return returnPath;
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }
}

关于地区的编码可查看官方文档七牛云

controller层

代码如下（示例）：

@Slf4j
@Controller
@RequestMapping("/qiniu")
public class TestQiNiuController {

    @RequestMapping("/toIndex")
    public String index(){
        return "img";
    }

    @ResponseBody
    @RequestMapping(value = "/image", method = RequestMethod.POST)
    private String postUserInforUpDate(HttpServletRequest request, @RequestParam("file") MultipartFile multipartFile) throws IOException {

        // 用来获取其他参数
        MultipartHttpServletRequest params = ((MultipartHttpServletRequest) request);
        String name = params.getParameter("username");
        if (!multipartFile.isEmpty()) {
            FileInputStream inputStream = (FileInputStream) multipartFile.getInputStream();
            String path = QiniuUtils.uploadQNImg(inputStream, PictureUtil.getRandomFileName()); // KeyUtil.genUniqueKey()生成图片的随机名
            System.out.print("七牛云返回的图片链接:" + path);
            return path;
        }
        return "上传失败";
    }
}

图片上传成功后，控制台会返回一个图片的外网链接，前台可以通过这个外网链接获取到图片显示到前台

前台html和js

<font color=#999AAA ><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
    /**
     * 上传图片
     */
    function uploadImg(){

        /**
         * formData在jquey中使用需要设置：
         * processData: false, // 告诉jQuery不要去处理发送的数据
         * contentType: false // 告诉jQuery不要去设置Content-Type请求头
         * @type {null}
         */
        var fd = new FormData();

        // 第一个参数为controller 接收的参数名称 , input的id
        fd.append("file", document.getElementById("inputId").files[0]);
        $.ajax({
            url:"http://localhost:8082/all/qiniu/image",
            type:"post",
            data:fd,
            processData:false,
            contentType:false,
            success:function(res){
                console.log(res);

                if (res.status.code == 0) {
                    if (!$('#img').empty()) {
                        $('#img').empty();
                    }
                    // 这一串代码复制不上来 ,截图在下面
                    $('#img').append(" ![](+res.result[0]+)");
                } else {
                    alert("图片上传失败");
                }
            },
            dataType:"json"
        })
    }
</script>

<div id="img">
    <input type="file" name="text" id="inputId">
    <input type="submit" onclick="uploadImg()">
    <!-- 图片链接 -->
    <img src="http://prom5oysi.bkt.clouddn.com/pciture9366020190518" width="1000px">
</div>

</body>
</html>