基于前端用Vue2后端用Springboot进行讲解
一、创建阿里云OSS
对象存储 OSS_云存储服务_企业数据管理_存储-阿里云 (aliyun.com)，打开网站进行开通
开通后我们来到Bucket列表，创建Bucket
创建过程：后面就默认就行了
创建完成后我们获取上传所需要的数据，bucketName、endpoint、 accessKeyId、 accessKeySecret
buckerName就是刚刚创建Bucket的名字
endpoint在Bucket的概述里，我们点进去就能看见
accessKeyId和accessKeySecret需要我们去验证索取，我们把鼠标悬浮到右上角的头像去会有一个弹出层，点击accessKey进去就可以获取
阿里云的OSS的所需的数据我们以及获取完了，接下来我们一起来看下代码
二、Vue前端
我们先来看下前端代码
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleUploadSuccess1(response) {
// 在这里可以从 response 中获取上传成功后的 URL
console.log('上传成功', response);
}
}
}
</script><el-upload>就是上传组件，action是上传图片的后端接口，当选择照片后会自动上传并返回响应结果
:on-preview是查看上传成功的照片
:on-remove是移除上传成功的照片
:on-success是图片上传成功后的调用函数，通常会在函数里获取响应结果的Url
三、SpringBoot后端
后端我就直接上代码了
首先在yml文件加上阿里云OSS的配置
再在xml文件中加入阿里云OSS的依赖
<!-- 阿里云OSS -->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.15.1</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>dysmsapi20170525</artifactId>
<version>2.0.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.aliyun/aliyun-java-sdk-core -->
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.1.1</version>
</dependency>Controller层
package com.water.Controlller;
import com.water.Pojo.Result;
import com.water.Service.UploadService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
@RestController
@CrossOrigin("你的前端url")
@Slf4j
public class UploadController {
//阿里云存储文件
@Autowired
private UploadService uploadService;
@PostMapping("/Upload")
public Result upload(MultipartFile file) throws IOException {
log.info("上传文件，文件名称：{}",file.getOriginalFilename());
//调用阿里云OSS工具类，将上传上来的文件存入阿里云
//上传文件到阿里云oss 获取上传文件
String url = uploadService.upload(file);
//将图片上传完成后的url返回，用于浏览器回显展示
System.out.println(url);
return Result.success(url);
}
}
Service层
package com.water.Service;
import org.springframework.web.multipart.MultipartFile;
public interface UploadService {
//上传文件到阿里云oss
String upload(MultipartFile file);
}
ServiceImpl层
package com.water.Service.ServiceImpl;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.water.OSS.ConstantOssPropertiesUtils;
import com.water.Service.UploadService;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;
@Service
public class UploadServiceImpl implements UploadService {
@Override
public String upload(MultipartFile file) {
// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = ConstantOssPropertiesUtils.EDNPOINT;
String accessKeyId = ConstantOssPropertiesUtils.ACCESS_KEY_ID;
String accessKeySecret = ConstantOssPropertiesUtils.SECRECT;
String bucketName = ConstantOssPropertiesUtils.BUCKET;
try {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 上传文件流。
InputStream inputStream = file.getInputStream();
String fileName = file.getOriginalFilename();
//生成随机唯一值，使用uuid，添加到文件名称里面
String uuid = UUID.randomUUID().toString().replaceAll("-","");
fileName = uuid+fileName;
//按照当前日期，创建文件夹，上传到创建文件夹里面
// 2021/02/02/01.jpg
String timeUrl = new DateTime().toString("yyyy/MM/dd");
fileName = timeUrl+"/"+fileName;
System.out.println(bucketName);
System.out.println(fileName);
System.out.println(inputStream);
//调用方法实现上传
ossClient.putObject(bucketName, fileName, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
//上传之后文件路径
// https:// yygh-lxyk .oss-cn-beijing.aliyuncs.com /01.jpg
String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
//返回
System.out.println(url);
return url;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
我的Result类（放在实体类中）
package com.water.Pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
private Integer code;//响应码，1 代表成功; 0 代表失败
private String msg; //响应信息 描述字符串
private Object data; //返回的数据
//增删改 成功响应
public static Result success(){
return new Result(1,"success",null);
}
//查询 成功响应
public static Result success(Object data){
return new Result(1,"success",data);
}
//失败响应
public static Result error(String msg){
return new Result(0,msg,null);
}
}
这样便能实现ElementUpload组件上传照片了
标签：Vue,String,上传,OSS,Upload,Result,file,import,com From： https://blog.csdn.net/None_ones/article/details/137169244