Java用Springmvc上传图片到阿里云OSS

最新推荐文章于 2022-12-14 16:36:51 发布

DouZi啊

最新推荐文章于 2022-12-14 16:36:51 发布

阅读量356

点赞数

分类专栏： Java笔记前端技术文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/wangdouzi376/article/details/125253160

版权

Java笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端技术

4 篇文章 0 订阅

订阅专栏

前端布局:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 200px;
        height: 200px;
        display: block;
    }
</style>
<body>
<div id="app">
    <el-form label-width="80px" :model="formLabelAlign">
        <el-form-item label="头像">
            <el-upload
                    class="avatar-uploader"
                    action="/user/uploadAvatar"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="formLabelAlign.pwd"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
        <el-button type="primary" round @click="onSubmit">确定添加</el-button>
    </el-form>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            formLabelAlign: {},
            imageUrl: "",
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                this.formLabelAlign.avatar = this.imageUrl;
                console.log(this.formLabelAlign)
            },
            onSubmit() {
                axios.post("/user/upForm", this.formLabelAlign).then(function (result) {
                    if (result.data.code === 2000) {//===:比较值和引用是否相同
                        window.location.replace("/indexAd.jsp");
                    }
                });
            },

        }
    })
</script>
</html>

选择阿里的OSS服务

引入Java的jar包

引入官方代码

package cn.wd.until;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

/**
 * @author DouZi
 * @Blog areone.top
 */
public class OSSUntil {
    public static String upload(MultipartFile myfile) {
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "XXXXXXXXXXX";
        String accessKeySecret = "XXXXXXXXXXXXXX";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "zsbzzz";
        //你上传到oss后的名字 会根据日期帮你创建文件夹。
        String objectName = fileName(myfile);
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = myfile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe) {

        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        //https://qy151.oss-cn-hangzhou.aliyuncs.com/2022/6/10/20d3d7e6b5bb455cb548675501f7270fgdnj.jpg
        String url = "https://" + bucketName + "." + endpoint + "/" + objectName;
        return url;
    }

    //获取上传到oss后的名字
    private static String fileName(MultipartFile myfile) {
        Calendar calendar = Calendar.getInstance();
        String name = calendar.get(Calendar.YEAR) + "/" + (calendar.get(Calendar.MONTH) + 1) + "/" +
                calendar.get(Calendar.DATE) + "/" + UUID.randomUUID().toString().replace("-", "") +
                myfile.getOriginalFilename();
        return name;
    }
}

这里的代码是封装了一下直接在后端调用

package cn.wd.controller;

import cn.wd.dao.UserDao;
import cn.wd.entity.User;
import cn.wd.until.CommonResult;
import cn.wd.until.OSSUntil;
import com.aliyun.oss.internal.OSSUtils;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @author DouZi
 * @Blog areone.top
 */
@RestController
@RequestMapping(value = "user")
public class AdController {
    @RequestMapping("uploadAvatar")
    public CommonResult uploadAvatar(MultipartFile file) {
        try {
            String avatar = OSSUntil.upload(file);
            return new CommonResult(2000, "上传成功", avatar);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new CommonResult(5000, "失败", null);
    }

}