spring文件上传到OSS文件服务器

最新推荐文章于 2024-05-08 19:25:24 发布

青柠果

最新推荐文章于 2024-05-08 19:25:24 发布

阅读量530

点赞数

分类专栏： ALiYun 文章标签： spring java

本文链接：https://blog.csdn.net/qq_50896786/article/details/125229333

版权

ALiYun 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2.elementui 异步上传OSS服务器

1.普通的文件上传到OSS文件服务器

1.1 阿里云界面操作

1.2 引入阿里云的OSS依赖

<!--所使用的是1.8的JDK，要是1.9及以上要换依赖-->
<dependency>
     <groupId>com.aliyun.oss</groupId>
     <artifactId>aliyun-sdk-oss</artifactId>
     <version>3.10.2</version>
   </dependency>

1.3 OOS代码的书写

public class UploadFile {
    public static String upload(MultipartFile multipartFile){
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。

        String accessKeyId = "#填写自己的账户";

        String accessKeySecret = "#填写自己的密钥";

        // 填写Bucket名称，例如examplebucket。
        String bucketName = "#自己的项目名称";
        // 你上传到oss后的名字 会根据日期帮你创建文件夹
        String objectName =fileName(multipartFile);
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            InputStream inputStream =multipartFile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
    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;
    }
}

2.elementui 异步上传OSS服务器

2.1 实现界面

2.2 前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>阿里云界面</title>
    <link type="text/css" rel="stylesheet"  href="css/index.css">
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <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: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="con">
    <el-form  label-width="80px" :model="UserForm">
        <el-form-item label="账号">
            <el-input v-model="UserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="UserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="UserForm.phone"></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload
                    class="avatar-uploader"
                    action="aliLoad"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="UserForm.imageUrl" :src="UserForm.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app=new Vue({
        el:"#con",
        data:{
            UserForm:{
                imageUrl:''
            },
        },
        methods:{
            handleAvatarSuccess(res) {
                console.log(res)
                this.UserForm.imageUrl = res.date;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onSubmit:function (){
                axios.post("aliLoad01",this.UserForm).then(function (result) {
                    console.log(result)
                })
            }
        }
    })
</script>
</html>

2.2 封装一个工具类

public class UploadFile {
    public static String upload(MultipartFile multipartFile){
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。

        String accessKeyId = "#填写自己的ID";

        String accessKeySecret = "填写自己的密钥";

        // 填写Bucket名称，例如examplebucket。
        String bucketName = "#填写自己的工程名";

        // 你上传到oss后的名字 会根据日期帮你创建文件夹
        String objectName =fileName(multipartFile);
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            InputStream inputStream =multipartFile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
    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;
    }
}

2.3 创建一个实体类

entity下

@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserALi {
    private String name;
    private String password;
    private String phone;
    private String imageUrl;
}

2.4 创建一个controller

@Controller
public class AliYun02 {

    @RequestMapping("/aliLoad")
    @ResponseBody
    public CommonResult testAli(MultipartFile file){
       return CommonResult.success(UploadFile.upload(file));
    }


    @RequestMapping("/aliLoad01")
    @ResponseBody
    public CommonResult testAli(@RequestBody UserALi userALi){
            return CommonResult.success(userALi);
    }

}

青柠果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
spring文件上传到OSS文件服务器

目录1.普通的文件上传到OSS文件服务器1.1 阿里云界面操作1.2 引入阿里云的OSS依赖1.3 OOS代码的书写2.elementui 异步上传OSS服务器2.1 实现界面2.2 前端2.2 封装一个工具类 2.3 创建一个实体类2.4 创建一个controller 1.3 OOS代码的书写2.elementui 异步上传OSS服务器2.1 实现界面 2.2 封装一个工具类 2.3 创建一个实体类entity下2.4 创建一个controller...
复制链接

扫一扫

专栏目录