elementui 异步上传OSS服务器保存用户信息

最新推荐文章于 2023-06-14 15:01:23 发布

fitifi

最新推荐文章于 2023-06-14 15:01:23 发布

阅读量110

点赞数

分类专栏： springmvc 文章标签： python 开发语言

本文链接：https://blog.csdn.net/fitifi/article/details/125228026

版权

springmvc 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1)引入阿里云的OSS依赖
2）后端工具
3)实体类
4）前端的布局
5)后台代码

1)引入阿里云的OSS依赖

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

2）后端工具

package com.zsb.utils;

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;

public class OSSUtils {
    public static String upload(MultipartFile myfile){
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "**********************";
        String accessKeySecret = "*********************";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "zsbzzz";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
        String objectName = fileName(myfile);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            InputStream inputStream = myfile.getInputStream();
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception e) {

        } 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.MARCH)+1)+
                "/"+calendar.get(Calendar.DATE)+
                "/"+ UUID.randomUUID().toString().replace("-","")+
                myfile.getOriginalFilename();
        return name;
    }
}

3)实体类

package com.zsb.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private String pwd;
    private String address;
    private String avatarUrl;
}

package com.zsb.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CommonResult {
    private Integer code;
    private String msg;
    private Object data;
}

4）前端的布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <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>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form  label-width="80px" :model="userForm">
            <el-upload
                    class="avatar-uploader"
                    action="uploadAvatar"
                    :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 label="名称">
                <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="userForm.pwd"></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>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            userForm:{},
            imageUrl:""
        },
        methods:{
            handleAvatarSuccess(result, file) {
                this.imageUrl=result.data;
                this.userForm.avatarUrl=this.imageUrl;
            },
            //提交
            onSubmit(){
                axios.post("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 (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && 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: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</html>

5)后台代码

package com.zsb.controller;

import com.zsb.entity.CommonResult;
import com.zsb.entity.User;
import com.zsb.utils.OSSUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class UserController {
    @RequestMapping("/uploadAvatar")
    @ResponseBody
    public CommonResult addUser(MultipartFile file){
        try {
            String avatar = OSSUtils.upload(file);
            return new CommonResult(2000,"上传成功",avatar);
        }catch (Exception e){
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败",null);
    }
    @RequestMapping("/addUser")
    @ResponseBody
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(2000,"成功",null);
    }

}