vue脚手架 element-ui spring boot 实现图片上传阿里云 并保存到数据库

一.阿里云

注册登陆就不讲了，登陆进去后如下操作

1.

进入对象存储OSS 创建一个新的Bucket

随后点击新建的bucket

2.去访问RAM

前往RAM控制台

3.去创建用户 

4.创建密匙

5.随后返回RAM控制台

 给用户增加权限，文件上传所需权限，需要带含有OSS的权限。

6.随后进入用户将自己创建的密匙赋予给该用户，目的就是为了更安全 

 

好的，到此为止，阿里云的配置就完成了，windows系统的操作就到此为止了，接下来是ideal的操作

 二.后台配置

2.1导入依赖

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

 2.2所需工具类

ResponseResult

package com.dmdd.javasecuritypractice.util;import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.Data;import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** 响应数据封装对象*/
@Data
public class ResponseResult<T> {/*** 状态信息*/private ResponseStatus status;/*** 数据*/private T data;public ResponseResult(ResponseStatus status, T data) {this.status = status;this.data = data;}/*** 返回成功对象* @param data* @return*/public static <T>  ResponseResult<T> ok(T data){return new ResponseResult<>(ResponseStatus.OK, data);}/*** 返回错误对象* @param status* @return*/public static ResponseResult<String> error(ResponseStatus status){return new ResponseResult<>(status,status.getMessage());}/*** 返回错误对象* @param status* @return*/public static ResponseResult<String> error(ResponseStatus status,String msg){return new ResponseResult<>(status,msg);}/*** 向流中输出结果* @param resp* @param result* @throws IOException*/public static void write(HttpServletResponse resp, ResponseResult result) throws IOException {//设置返回数据的格式resp.setContentType("application/json;charset=UTF-8");//jackson是JSON解析包，ObjectMapper用于解析 writeValueAsString 将Java对象转换为JSON字符串String msg = new ObjectMapper().writeValueAsString(result);//用流发送给前端resp.getWriter().print(msg);resp.getWriter().close();}
}

OSSutils

package com.dmdd.javasecuritypractice.util;import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSBuilder;
import com.aliyun.oss.OSSClientBuilder;import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
import java.net.URL;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneId;
import java.util.Date;/*** OSS文件上传工具类*/
public class OSSUtil {// Endpoint以杭州为例，其它Region请按实际情况填写。private static String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。private static String accessKeyId = "LTAI5M";private static String accessKeySecret = "**";private static String bucketName = "**";//目录名public static String dir = "images";/*** 文件上传* @param inputStream* @param fileName*/public static void upload(InputStream inputStream, String fileName){OSS oss = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);oss.putObject(bucketName,dir +"/"+ fileName,inputStream);oss.shutdown();}/*** 获得文件URL* @param fileName* @return*/public static String getURL(String fileName){OSS oss = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);//设置过期时间LocalDateTime time = LocalDateTime.now().plusDays(100);Date expiration = Date.from(time.atZone( ZoneId.systemDefault()).toInstant());URL url = oss.generatePresignedUrl(bucketName, dir +"/"+ fileName, expiration);oss.shutdown();return url.toString();}public static void main(String[] args) throws FileNotFoundException {OSSUtil.upload(new FileInputStream("E:\\img\\xing.png"),"xing.png");System.out.println(OSSUtil.getURL("xing.png"));}
}

private static String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
private static String accessKeyId = "LTAI5tHcwsYkxjt6YxgrEVAM";
private static String accessKeySecret = "WeBHibTdv1ybo44MlEWxo7VpCXyO1l";
private static String bucketName = "dmddjly"；

设置文件上传到哪个bucket 以及 该bucket设置的秘钥。

还有设置bucket所选的地区 我选的是华东1（杭州）

 2.3UpLoadController

package com.dmdd.javasecuritypractice.controller;import com.dmdd.javasecuritypractice.util.OSSUtil;
import com.dmdd.javasecuritypractice.util.ResponseResult;
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
public class UploadController {
@PostMapping("/upload")public ResponseResult<String> upload(MultipartFile file) throws IOException{//上传OSSOSSUtil.upload(file.getInputStream(),file.getOriginalFilename());//获得urlString url = OSSUtil.getURL(file.getOriginalFilename());return  ResponseResult.ok(url);}
}

调用工具类方法，实现文件上传。 

三. vue脚手架实现图片上传

3.1调用elementui的文件上传功能

<el-form-item label="头像" :label-width="formLabelWidth"><el-uploadclass="avatar-uploader"action="http://localhost:8080/upload":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="user.icon" :src="user.icon" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item>

1. action 是选择图片后将会发送的请求

2.:on-success 成功后执行的事件

3.:before-upload 发送图片前执行的事件，可以进行图片类型 ，大小的限制

3.2两个事件： 

//上传图片成功回调handleAvatarSuccess(res, file) {console.log(res)this.user.icon = 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;},

 最终结果