前排声明:
本文章 整合修改自https://blog.csdn.net/hcjsjqjssm/article/details/80977735 博客
一是自己以后回顾,二希望可以帮助到使用此功能的同学,假使帮助到了你,可以点个赞,留个言,如果有不成功的 也可以留言 一起解决下
提示:
这几个地方可能会报错 你只要更换下你自己的就行
日志打印类
uuid生成工具类 你可以百度一个 换上
上传工具类的日志打印 你要换掉
现在的controller 是上传完跳到一个成功的页面,但是一般用的话 应该是返回给前台上传成功后的图片id 你可以写一个返回的类 将他返回给前台 可以改一下
现在maven pom导入oss的依赖
<dependency>
<groupId>com.aliyun.ossgroupId>
<artifactId>aliyun-sdk-ossartifactId>
<version>${oss.version}version>
dependency>
yml配置oss对象的属性`
这里你输入aliyun 不会有提示 是你自定义的属性 写就行了
aliyun:
oss:
access-id: 你的id
access-key: 你的key
bucket: 你的buket
endpoint: 你的endpoint
dir: 设置文件存放文件夹 随便写 上传自动生成
expire: 失效时间
写完配置 你需要一个类进行接收
我这里用了idea的一个插件 lombk ,使用data注解 不写getset方法了,你可以百度一下如何使用,就在pom里加载下依赖,然后再idea插件搜索下 然后安装 。 如果没弄出来,可以不用,生成getset方法
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
@Configuration
@ConfigurationProperties("aliyun.oss")
@Data
public class AliyunOssProperties {
private String accessId;
private String accessKey;
private String bucket;
private String endpoint;
private String dir;
private Integer maxSize = Integer.valueOf(1);
private Integer expire = Integer.valueOf(30);
private boolean secure = false;
private String roleSessionName;
public AliyunOssProperties() {
}
}
然后上传工具类
注意下面,有一个设置权限公共读,假使这个权限不设置的话,你的图片路径就是一长串字符串,要是返回前台的话 估计没法用 加上这个
后缀只是你生成图片的id加后缀名
package com.chargerlink.ost.common.utils;
import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.CannedAccessControlList;
import com.aliyun.oss.model.CreateBucketRequest;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;
import com.chargerlink.ost.common.annotation.ChargerlinkLog;
import com.chargerlink.ost.common.constant.AliyunOssProperties;
import org.springframework.beans.factory.annotation.Autowired;
import java.io.File;
import java.text.SimpleDateFormat;
@ChargerlinkLog
public class AliyunOssUtils {
@Autowired
AliyunOssProperties aliyunOssProperties;
/** 上传文件*/
public String upLoad(File file){
String endpoint = aliyunOssProperties.getEndpoint();
System.out.println("获取到的Point为:"+endpoint);
String accessKeyId = aliyunOssProperties.getAccessId();
String accessKeySecret = aliyunOssProperties.getAccessKey();
String bucketName = aliyunOssProperties.getBucket();
String fileHost = aliyunOssProperties.getDir();
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
// 判断文件
if(file==null){
return null;
}
String fileUrl = "";
OSSClient client=new OSSClient(endpoint, accessKeyId, accessKeySecret);
try {
// 判断容器是否存在,不存在就创建
if (!client.doesBucketExist(bucketName)) {
client.createBucket(bucketName);
CreateBucketRequest createBucketRequest = new CreateBucketRequest(bucketName);
createBucketRequest.setCannedACL(CannedAccessControlList.PublicRead);
client.createBucket(createBucketRequest);
}
// 设置文件路径和名称
fileUrl = fileHost + (UUIDUtils.getUuid32() + file.getName().substring(file.getName().lastIndexOf("."),file.getName().length()));
// 上传文件
PutObjectResult result = client.putObject(new PutObjectRequest(bucketName, fileUrl, file));
// 设置权限(公开读)
client.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);
if (result != null) {
LoggerUtil.info("------OSS文件上传成功------" + fileUrl);
}
}catch (OSSException oe){
LoggerUtil.error(oe.getMessage());
}catch (ClientException ce){
LoggerUtil.error(ce.getErrorMessage());
}finally{
if(client!=null){
client.shutdown();
}
}
return fileUrl;
}
}
到此已经完成一半了 下面是controller 接收文件 进行文件上传,只支持带文件参数的上传,layui的那种还没有研究好,如果大家有好的也可以分享下
package com.chargerlink.ost.web.controller.upload;
import com.chargerlink.ost.common.utils.DeleteFileUtil;
import com.chargerlink.ost.common.utils.OssUtils;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
/**
* User: zongkun
* Date: 18.7.20
* Description:
*/
@Controller
@RequestMapping("support/pic")
public class UpLoadPicController {
private final org.slf4j.Logger logger = LoggerFactory.getLogger(getClass());
private static final String TO_PATH = "test";
private static final String RETURN_PATH = "success";
/* @Autowired
private OssUtils aliyunOSSUtil;*/
@GetMapping("/toUpLoadFile")
public String toUpLoadFile(){
int a = 0;
return TO_PATH;
}
/** 文件上传*/
@PostMapping(value = "/uploadFile")
public String uploadBlog(MultipartHttpServletRequest request) {
logger.info("文件上传");
//
Iterator fileNames = request.getFileNames();
try {
while (fileNames.hasNext()) {
//把fileNames集合中的值打出来
String fileName=fileNames.next();
System.out.println("fileName: "+fileName);
/*
* request.getFiles(fileName)方法即通过fileName这个Key, 得到对应的文件
* 集合列表. 只是在这个Map中, 文件被包装成MultipartFile类型
*/
List fileList=request.getFiles(fileName);
if (fileList.size()>0) {
//遍历文件列表
Iterator fileIte=fileList.iterator();
while (fileIte.hasNext()) {
//获得每一个文件
MultipartFile multipartFile = fileIte.next();
if (multipartFile != null) {
String filename = multipartFile.getOriginalFilename();
if (!"".equals(filename.trim())) {
File newFile = new File(filename);
FileOutputStream os = new FileOutputStream(newFile);
os.write(multipartFile.getBytes());
os.close();
multipartFile.transferTo(newFile);
// 上传到OSS
String uploadUrl = OssUtils.upLoad(newFile);
System.err.println(uploadUrl);
// 删除上传的文件
File file1=new File("");
String s = file1.getAbsolutePath();
DeleteFileUtil.delete(s + "\\" + filename);
}
}
}
}
}
} catch (IOException e) {
e.printStackTrace();
}
return RETURN_PATH;
}
}
原来的这个是没有文件删除的,就是你上传一张图片后,咋你的项目根目录就会保存一张你上传的图片,我又找了一个删除的工具类
在上传完成后,接着把保存在本地的图片删除了代码如下
package com.chargerlink.ost.common.utils;
import java.io.File;
/**
* 删除文件和目录
*
*/
public class DeleteFileUtil {
/**
* 删除文件,可以是文件或文件夹
*
* @param fileName
* 要删除的文件名
* @return 删除成功返回true,否则返回false
*/
public static boolean delete(String fileName) {
File file = new File(fileName);
if (!file.exists()) {
System.out.println("删除文件失败:" + fileName + "不存在!");
return false;
} else {
if (file.isFile())
return deleteFile(fileName);
else
return deleteDirectory(fileName);
}
}
/**
* 删除单个文件
*
* @param fileName
* 要删除的文件的文件名
* @return 单个文件删除成功返回true,否则返回false
*/
public static boolean deleteFile(String fileName) {
File file = new File(fileName);
// 如果文件路径所对应的文件存在,并且是一个文件,则直接删除
if (file.exists() && file.isFile()) {
if (file.delete()) {
System.out.println("删除单个文件" + fileName + "成功!");
return true;
} else {
System.out.println("删除单个文件" + fileName + "失败!");
return false;
}
} else {
System.out.println("删除单个文件失败:" + fileName + "不存在!");
return false;
}
}
/**
* 删除目录及目录下的文件
*
* @param dir
* 要删除的目录的文件路径
* @return 目录删除成功返回true,否则返回false
*/
public static boolean deleteDirectory(String dir) {
// 如果dir不以文件分隔符结尾,自动添加文件分隔符
if (!dir.endsWith(File.separator))
dir = dir + File.separator;
File dirFile = new File(dir);
// 如果dir对应的文件不存在,或者不是一个目录,则退出
if ((!dirFile.exists()) || (!dirFile.isDirectory())) {
System.out.println("删除目录失败:" + dir + "不存在!");
return false;
}
boolean flag = true;
// 删除文件夹中的所有文件包括子目录
File[] files = dirFile.listFiles();
for (int i = 0; i < files.length; i++) {
// 删除子文件
if (files[i].isFile()) {
flag = DeleteFileUtil.deleteFile(files[i].getAbsolutePath());
if (!flag)
break;
}
// 删除子目录
else if (files[i].isDirectory()) {
flag = DeleteFileUtil.deleteDirectory(files[i]
.getAbsolutePath());
if (!flag)
break;
}
}
if (!flag) {
System.out.println("删除目录失败!");
return false;
}
// 删除当前目录
if (dirFile.delete()) {
System.out.println("删除目录" + dir + "成功!");
return true;
} else {
return false;
}
}
public static void main(String[] args) {
// // 删除单个文件
// String file = "c:/test/test.txt";
// DeleteFileUtil.deleteFile(file);
// System.out.println();
// 删除一个目录
String dir = "D:/home/web/upload/upload/files";
DeleteFileUtil.deleteDirectory(dir);
// System.out.println();
// // 删除文件
// dir = "c:/test/test0";
// DeleteFileUtil.delete(dir);
}
}
最后是html页面 你可以测试使用
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layuititle>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{~/layui/css/layui.css}" media="all">
head>
<body>
<blockquote class="layui-elem-quote">为节省服务器开销,以下示例均未配置真实上传接口,所以每次上传都会报提示:请求上传接口出现异常,这属于正常现象。blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用:普通图片上传legend>
fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText">p>
div>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片legend>
fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2">div>
blockquote>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>指定允许上传的文件类型legend>
fieldset>
<button type="button" class="layui-btn" id="test3"><i class="layui-icon">i>上传文件button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon">i>只允许压缩文件button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">i>上传视频button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon">i>上传音频button>
<div style="margin-top: 10px;">
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620">ins>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设定文件大小限制legend>
fieldset>
<button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon">i>上传图片button>
<div class="layui-inline layui-word-aux">
这里以限制 60KB 为例
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>同时绑定多个元素,并将属性设定在元素上legend>
fieldset>
<button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传Abutton>
<button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传Bbutton>
<button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传Cbutton>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>选完文件后不自动上传legend>
fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件button>
<button type="button" class="layui-btn" id="test9">开始上传button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>拖拽上传legend>
fieldset>
<div class="layui-upload-drag" id="test10">
<i class="layui-icon">i>
<p>点击上传,或将文件拖拽到此处p>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高级应用:制作一个多文件列表legend>
fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>文件名th>
<th>大小th>
<th>状态th>
<th>操作th>
tr>thead>
<tbody id="demoList">tbody>
table>
div>
<button type="button" class="layui-btn" id="testListAction">开始上传button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>绑定原始文件域legend>
fieldset>
<input type="file" name="file" id="test20">
<script th:src="@{~/layui/layui.all.js}" th:inline="none" >script>
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/support/uploadTmpFolder/'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, ret){
// $('#demo1').attr('src', ret); //图片链接(base64)
$('#form input[name="filename"]').val(file.name);//文件名
console.log(file.name);
});
}
,done: function(res){
//如果上传失败
/* if(res.code > 0){
return layer.msg('上传失败');
}*/
if(res.code === 0){
layer.msg('上传成功!');
console.log(res);
var orgFileId = res.data[0][0];//文件id
console.log(orgFileId);
$('#form input[name="fileId"]').val(orgFileId);
$("#test2").val("已上传");
}
//上传成功
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//多图片上传
upload.render({
elem: '#test2'
,url: '/support/pic/uploadFile/'
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
// $('#demo2').append('')
$('#form input[name="filename"]').val(file.name);//文件名
console.log(file.name);
});
}
,done: function(res){
//上传完毕
if(res.success){
layer.msg('上传成功!');
console.log(res);
var orgFileId = res.data[0][0];//文件id
console.log(orgFileId);
$('#form input[name="fileId"]').val(orgFileId);
$("#test2").val("已上传");
}
}
});
//指定允许上传的文件类型
upload.render({
elem: '#test3'
,url: '/upload/'
,accept: 'file' //普通文件
,done: function(res){
console.log(res)
}
});
upload.render({ //允许上传的文件后缀
elem: '#test4'
,url: '/upload/'
,accept: 'file' //普通文件
,exts: 'zip|rar|7z' //只允许上传压缩文件
,done: function(res){
console.log(res)
}
});
upload.render({
elem: '#test5'
,url: '/upload/'
,accept: 'video' //视频
,done: function(res){
console.log(res)
}
});
upload.render({
elem: '#test6'
,url: '/upload/'
,accept: 'audio' //音频
,done: function(res){
console.log(res)
}
});
//设定文件大小限制
upload.render({
elem: '#test7'
,url: '/upload/'
,size: 60 //限制文件大小,单位 KB
,done: function(res){
console.log(res)
}
});
//同时绑定多个元素,并将属性设定在元素上
upload.render({
elem: '.demoMore'
,before: function(){
layer.tips('接口地址:'+ this.url, this.item, {tips: 1});
}
,done: function(res, index, upload){
var item = this.item;
console.log(item); //获取当前触发上传的元素,layui 2.1.0 新增
}
})
//选完文件后不自动上传
upload.render({
elem: '#test8'
,url: '/support/upload/'
,auto: false
//,multiple: true
,bindAction: '#test9'
,done: function(ret){
console.log(ret)
if(ret.code == 0){
layer.msg('上传成功!');
console.log(ret);
var orgFileId = ret.data[0][0];//文件id
console.log(orgFileId);
// $('#form input[name="fileId"]').val(orgFileId);
$("#test2").val("已上传");
}
/*var file = r;
var g_object_name = ret.dir + random_string() + get_suffix(file.name);
var request = new FormData();
request.append("OSSAccessKeyId", ret.accessid);//Bucket 拥有者的Access Key Id。
request.append("policy", ret.policy);//policy规定了请求的表单域的合法性
request.append("Signature", ret.signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
request.append("key", g_object_name);//文件名字,可设置路径
request.append("success_action_status", '200');// 让服务端返回200,不然,默认会返回204
request.append('x-oss-object-acl', 'public-read');
request.append('file', file);
$.ajax({
url: ret.host,
data: request,
processData: false,
cache: false,
async: false,
contentType: false,
type: 'post',
success: function (callbackHost, request) {
var origin = ret.host + '/' + g_object_name;
var src = origin;
var isExchange = $(obj).siblings("input")[0].value != "";
$($(obj).siblings("input")[0]).val(src);
Shinez.tip("success", "上传成功");
if ($(obj).parents(".upload-multiple").length > 0 && !isExchange) {
var $newObject = $($(obj).parents(".pull-left")[0]).clone(true);
$newObject.find("img").attr("src", "");
$newObject.find("input[type=hidden]").val("");
var i = $newObject.find(".img-del").attr("data-index");
$newObject.find(".img-del").attr("data-index", parseInt(i) + 1);
$(obj).parents(".upload-multiple").append($newObject[0]);
}
},
error: function (returndata) {
console.log("return data:" + returndata);
alert('上传图片出错啦,请重试')
}
});*/
}
});
//拖拽上传
upload.render({
elem: '#test10'
,url: '/upload/'
,done: function(res){
console.log(res)
}
});
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/support/pic/uploadFile/'
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $([''">'
,''+ file.name +' '
,''+ (file.size/1014).toFixed(1) +'kb '
,'等待上传 '
,''
,''
,''
,' '
,' '].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传成功');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
//绑定原始文件域
upload.render({
elem: '#test20'
,url: '/upload/'
,done: function(res){
console.log(res)
}
});
function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (var i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
var pos = filename.lastIndexOf('.')
var suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
});
script>
body>
html>
成功页面
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>【文件上传成功页面】title>
head>
<body>
<div align="center">
<h5>上传成功h5>
<img src="images/true.jpg" />
div>
body>
html>
到此 spring boot整合oss 上传图片就完成了
假使你用的不是spring boot 只是maven的话 只需要把ylm的配置 配置在实体类引用即可
代码如下
package com.chargerlink.ost.common.constant;
/**
* @class:OSSClientConstants
* @descript:阿里云注册用户基本常量
*/
public class OSSClientConstants {
//阿里云API的外网域名
public static final String ENDPOINT = "";
//阿里云API的密钥Access Key ID
public static final String ACCESS_KEY_ID = "";
//阿里云API的密钥Access Key Secret
public static final String ACCESS_KEY_SECRET = "";
//阿里云API的bucket名称
public static final String BACKET_NAME = "";
//阿里云API的文件夹名称
public static final String FOLDER="";
}