当前位置：网站首页>OSS文件上传
OSS文件上传
2022-07-24 05:15:00 【王九九】
1.文件上传到本地服务器的缺点
1.当我们的服务器重启，或者关闭时，我们上传到服务器的文件会消失
2.当我们又服务器群是，如果我第一次是访问的A服务器，将我的文件上传到A 服务器，当我第二次访问的时候，我访问的不是A服务器，而是B服务器，那我无法访问到我的文件
2.如何解决本地服务器的缺点
1.自己搭建一个文件服务器，将文件都放到里面
2.使用第三方的工具
3.普通文件上传到OSS
1.引入OSS 依赖
<dependencies>
<!--OSS的依赖-->
<dependency>
<groupId>repMaven.commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<!--MVC的依赖-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.2</version>
</dependency>
<dependency>
<groupId>repMaven.javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
</dependencies>2.代码的书写
在阿里云的产品文档可以找到
代码：
import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import java.io.FileInputStream;
import java.io.InputStream;
public class Demo {
public static void main(String[] args) throws Exception {
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
//endpoint 找到自己的bucked的目录 点自己的包的名字，然后点击概览，有endpoint外网的地址
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
//自己的秘钥
String accessKeyId = "yourAccessKeyId";
String accessKeySecret = "yourAccessKeySecret";
// 填写Bucket名称，例如examplebucket。
String bucketName = "examplebucket";
// 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
String objectName = "exampledir/exampleobject.txt";
// 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
// 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
String filePath= "D:\\localpath\\examplefile.txt";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream = file.getInputStream(filePath);
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (OSSException oe) {
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
} 2.elementui 异步上传OSS服务器
1.前端
<%--
Created by IntelliJ IDEA.
User: ykq
Date: 2022/6/9
Time: 15:53
To change this template use File | Settings | File Templates.
--%>
<%@ 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">
<%--action：文件上传的路径--%>
<el-upload
class="avatar-uploader"
action="/login"
: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>
<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 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>
后端
package com.ykq.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;
/**
* @program: qy151-springmvc-upload
* @description:
* @author: 闫克起2
* @create: 2022-06-10 16:00
**/
public class OSSUtils {
public static String upload(MultipartFile file){
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
//LTAI78XQAZq2s5Rv
//qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "LTAI78XQAZq2s5Rv";
String accessKeySecret = "qdyZxR0x4LoUpTVbuyvCGdcrhEyw7H";
// 填写Bucket名称，例如examplebucket。
String bucketName = "jiu99";
//你上传到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 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 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;
}
}
接口
@RequestMapping("/login")
@ResponseBody
public Map upload04(MultipartFile file) {
try {
String url = OSSUtils.upload(file);
Map map = new HashMap();
map.put("code", 2000);
map.put("msg", "上传成功");
map.put("data", url);
return map;
} catch (Exception e) {
e.printStackTrace();
}
HashMap map = new HashMap();
map.put("code", 5000);
map.put("msg", "上传失败");
return map;
}保存用户信息--头像
1.创建一个新的工程
2.引入我们需要的相关的依赖
<dependencies>
<dependency>
<groupId>repMaven.commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.15.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.2</version>
</dependency>
<dependency>
<groupId>repMaven.javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
</dependencies>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<filter>
<filter-name>b</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>b</filter-name>
<url-pattern>/**</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>a</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>a</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
3.配置文件
<context:component-scan base-package="guan"/>
<mvc:annotation-driven/>
<mvc:default-servlet-handler/>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="12485760"/>
</bean>4.前端页面
<%--
Created by IntelliJ IDEA.
User: lenovo
Date: 2022/6/10
Time: 21:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<title>Title</title><script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/qs.min.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="app">
<el-form label-width="80px" :model="user">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="login"
: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="user.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="user.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="user.sex"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">上传</el-button>
</el-form>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
imageUrl:"",
user:{},
},
methods: {
submitForm(){
//点击提交，要将数据返回到后台
axios.post("add",this.user).then(function(result){
})
}
,handleAvatarSuccess(res, file) {
//回显到页面上
this.imageUrl=res.data;
//将图片的路径保存到user中
this.user.image=this.imageUrl
},
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>
</body>
</html>
5.实体类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class USer {
private String name;
private String sex;
private int age;
}6.commonResult
@Data
@AllArgsConstructor
@NoArgsConstructor
public class CommonResult {
private int code;
private String msg;
private Object data;
}7.引入工具类
package guan.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;
/**
* TODO
*
* @author lenovo
* @version 1.0
* @since 2022-06-10 19:06:48
*/
public class OSSUtil {
public static String main(MultipartFile file) {
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-hangzhou.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
//LTAI5t7TZyWEmSktcmMVFcJr
//OiRHuQYnoyjgqi9nBdrbHmthMWqESp
String accessKeyId = "LTAI5t7TZyWEmSktcmMVFcJr";
String accessKeySecret = "OiRHuQYnoyjgqi9nBdrbHmthMWqESp";
// 填写Bucket名称，例如examplebucket。
String bucketName = "jiu99";
// 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
//创建日期对象
//时间+随机的一个上传文件的真实名字
String objectName =filename(file);
// 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream = file.getInputStream();
// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception oe) {
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
//让图片回显，将路径保存到request
String img="https://"+bucketName+"."+endpoint+"/"+objectName;
return img;
}
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;
}
}
8.接口
@RequestMapping("login")
@ResponseBody
public CommonResult login(MultipartFile file){
try {
String s = OSSUtil.main(file);
return new CommonResult(2000,"上传成功",s);
}catch (Exception e){
return new CommonResult(5000,"上传失败",null);
}
}@RequestMapping("add")
@ResponseBody
public CommonResult add(@RequestBody User user){
System.out.println(user);
return new CommonResult(5000,"上传失败",null);
}边栏推荐
- Do you want to have a robot that can make cartoon avatars in three steps?
- Ren Xudong, chief open source liaison officer of Huawei: deeply cultivate basic software open source and jointly build the root technology of the digital world
- 熊市抄底指南
- 网NN计算能主机系统资e提供的NTCP
- Drools 开发决策表
- Memorandum 2022
- In his early 30s, he became a doctoral director of Fudan University. Chen Siming: I want to write both codes and poems
- postgresql：在Docker中运行PostgreSQL + pgAdmin 4
- ）To feed back to the application layer or into multiple format documents:
- How can NFT, whose stars enter the market against the market, get out of the independent market?
猜你喜欢
Chapter 1 regression, classification & clustering
The second chapter is encog's data acquisition
MapReduce concept
Ren Xudong, chief open source liaison officer of Huawei: deeply cultivate basic software open source and jointly build the root technology of the digital world
How to set up an internal wiki for your enterprise?
Basic knowledge of MySQL database
![Embedded system transplantation [2] - Construction of cross development environment](/img/96/8d209c04e41675fc0efaa872c35615.png)
Embedded system transplantation [2] - Construction of cross development environment
How to avoid the most common mistakes when building a knowledge base?
Source code compilation!!
IDEA：SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“.
随机推荐
The opening ceremony of the 2022 Huawei developer competition in China kicked off!
1、基于增量式生成遮挡与对抗抑制的行人再识别
Token of space renewable energy
Learning pyramid context encoder network for high quality image painting paper notes
Jiang Xingqun, senior vice president of BOE: aiot technology enables enterprise IOT transformation
1. Input a 100 point score from the keyboard and output its grade according to the following principles: score ≥ 90, Grade A; 80 ≤ score ＜ 90, grade B; 70 ≤ score ＜ 80, grade C; 60 ≤ score ＜ 70, grade
Pointer learning diary (I)
Embedded system transplantation [2] - Construction of cross development environment
Pointer learning diary (IV) use structure and pointer (linked list)
The difference between run and start in thread class
Learning pyramid context encoder network for high quality image painting paper notes
What is the sandbox technology in the data anti disclosure scheme?
口叫SC 或者 pb 文件为读写控制ensor为
JDBC MySQL basic operations
MS simulated written test
Recursive cascade network: medical image registration based on unsupervised learning
Crazy God redis notes 09
Teach you how to weld CAD design board bottom (for beginners) graphic tutorial
Mysq Database Constraints
网NN计算能主机系统资e提供的NTCP