SpringMvc(四)普通的文件、elementui 异步上传到OSS文件服务器

最新推荐文章于 2023-03-18 21:24:58 发布

Naaaaa.a

最新推荐文章于 2023-03-18 21:24:58 发布

阅读量363

点赞数

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

本文链接：https://blog.csdn.net/qq_44189274/article/details/125229054

版权

java 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

1.文件上传到本地服务器的缺点

缺点：

1. 当服务器重启，本地服务的文件会清空。
2. 搭建服务器集群。A服务器， B服务器.........
客户第一次上传时访问的是A服务器。
客户第二次访问文件，访问的是B服务器，此时访问不到第一次的文件。

如何解决本地服务器上传的缺点:

（1）自己搭建一个文件服务器。不会重启。维护。

（2）使用第三方的文件服务器.

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

(1)引入阿里云的OSS依赖

    <!--oss的依赖-->
    <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.10.2</version>
    </dependency>

(2)java代码(带有注释的都需要自行修改)

public static void main(String[] args) {
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "*************";
        String accessKeySecret = "****************";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "***";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String objectName = "imgs/zp1.jpg";
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        String filePath= "C:\\Users\\Z\\Desktop\\1.jpg";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = new FileInputStream(filePath);
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

3. elementui 异步上传OSS服务器

（1）前端代码

<%@ 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>
<body>
<div id="app">
    <el-upload
            class="avatar-uploader"
            action="upload01"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</div>
</body>
<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>

<script>
    var app = new Vue({
        el:"#app",
        data: {
              imageUrl: ''
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
            },
            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;
            }
        }
    })
</script>
</html>

(2) controller接口

@Controller
public class UploadController {

    @RequestMapping("upload01")
    public Map upload01(MultipartFile file, HttpServletRequest request){
        try{
            //获取上传服务器目录路径
            String path = request.getSession().getServletContext().getRealPath("upload");
            //判断该目录是否存在
            File url = new File(path);
            if(!url.exists()){
                url.mkdirs();
            }
            //设置文件的新名字        生成一个随机ID             把ID中的"-" 替换为“”                   拼接文件原来的名字
            String filename = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename();
            File target = new File(path+"/"+filename);
            file.transferTo(target);

            Map map = new HashMap();
            map.put("code",2000);
            map.put("msg","上传成功");
            //回显到网页
            map.put("data","http://localhost:8080/springmvc_19/upload/"+filename);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }

        Map map = new HashMap();
        map.put("code","5000");
        map.put("msg","上传失败");
        return map;
    }
}

4.综合实例 -----注册

注册页面

<%@ 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>
    <style>
        #app{
            border: 1px solid gray;
            width: 400px;
            height: 450px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form label-width="80px" :model="userForm">
        <el-form-item label="头像:">
            <el-upload
                    class="avatar-uploader"
                    action="user/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <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="userForm.username"></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.address"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            userForm:{},
            imageUrl:""
        },
        methods:{
            handleAvatarSuccess(result,file){
                console.log( result);
                this.imageUrl=result.data;
                //为表单对象添加头像地址的属性
                this.userForm.avatarUrl=this.imageUrl;
            },
            //提交
            onSubmit(){
                axios.post("user/addUser",this.userForm).then(function(result){

                });
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG  && isLt2M || isPNG && isLt2M;
            }
        }
    })
</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: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 150px;
        display: block;
    }
</style>
</body>
</html>

创建工具类

package com.zsy.util;

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 : zhou
 * @date : 18:18 2022/6/10
 */
public class OSSUtil {
    public static String upload(MultipartFile file){
        // 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(file);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = file.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;
    }

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

        return name;
    }
}

controller控制层

package com.zsy.controller;

import com.zsy.entity.User;
import com.zsy.util.CommonResult;
import com.zsy.util.OSSUtil;
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;

/**
 * @author : zhou
 * @date : 21:53 2022/6/10
 */
@RestController
@RequestMapping("user")
public class UserController {

    @RequestMapping("upload")
    public CommonResult upload(MultipartFile file){
        try{
            String avatar = OSSUtil.upload(file);
            return  new CommonResult(2000,"上传成功",avatar);
        }catch (Exception e){
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败",null);
    }


    @RequestMapping("addUser")
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(2000,"注册成功",null);
    }
}

5.特殊注解

@RestController----类上等价于 @COntroller+@ResponseBody
该注解下所有的方法都是返回json数据

@RequestMapping: 作用: 把请求路径映射到响应的方法上。通过它来指定控制器可以处理哪些URL请求，可以写在接口上

@RequestParam(value = "u"):设置你接受的请求参数名。查询参数

@RequestMapping(value = "/addUser",method = RequestMethod.POST)
method:表示该接口接受的请求方式.不设置可以接受任意请求方式。

@GetMapping("addUser"):表示只接受get提交方式的请求

@PostMapping("addUser):表示只接受post提交方式的请求

@RequestBody:把请求的json数据转换为java对象。从前端到后端
@ResponseBody:把java转换为json数据从后端转前端

Naaaaa.a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringMvc(四)普通的文件、elementui 异步上传到OSS文件服务器

缺点：如何解决本地服务器上传的缺点:(1)引入阿里云的OSS依赖(2)java代码(带有注释的都需要自行修改)3. elementui 异步上传OSS服务器（1）前端代码(2) controller接口4.综合实例 -----注册注册页面创建工具类controller控制层5.特殊注解...
复制链接

扫一扫