关于图片存储:
1.nginx本地存储上传图片
官网下载稳定版解压即可
解压后目录结构:
进入conf下的nginx.conf文件添加图片地址:
根据自己的需求更改端口号以及图片存放路径,添加后运行nginx, 点击nginx.exe即可
server {
listen 9000;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location ~ .*\.(gif|jpg|jpeg|png|mp4|webp)$ {
expires 24h;
root E:/nignx/file/;#指定图片存放路径
access_log E:/nignx/file/log;#图片路径
proxy_store on;
proxy_store_access user:rw group:rw all:rw;
proxy_temp_path E:/nignx/file/;#图片路径
proxy_redirect off;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 1280k;
proxy_connect_timeout 900;
proxy_send_timeout 900;
proxy_read_timeout 900;
proxy_buffer_size 40k;
proxy_buffers 40 320k;
proxy_busy_buffers_size 640k;
proxy_temp_file_write_size 640k;
}
}
后端图片上传接口:
@RequestMapping("/upload/{order}")
public Result upload(@PathVariable String order, MultipartFile file){
String fileName=file.getOriginalFilename();
String newFileName=System.currentTimeMillis()+fileName.substring(fileName.lastIndexOf("."));
String path="E:\\nignx\\file"+order;
File f=new File(path);
if(!f.exists()){
f.mkdirs();
}
String url="http://localhost:9000/"+order+"/"+newFileName;
try {
file.transferTo(new File(path+"\\"+newFileName));
} catch (IOException e) {
e.printStackTrace();
return new Result(100,"异常情况",null);
}
return new Result(200,"操作成功",url);
}
前端获取图片实例:填写刚才指定端口号拼接上查询到的图片名称即可(该项目数据库只存储了图片名称)
<div class="detail-img">
<video v-if="data.type==='mp4'||data.type==='MP4'" id="video" width="900" height="360" :src="'http://localhost:9000/order/' + data.picPath" controls> </video>
<img v-else style="width:500px;height:300px;" :src="'http://localhost:9000/order/' + data.picPath" alt="" />
</div>
2.oss对象存储
阿里云对象存储 OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,提供最高可达 99.995 % 的服务可用性。多种存储类型供选择,全面优化存储成本。
首先需要在阿里云控制台创建bucket,
bucket创建成功后就可以进行使用:首先引入依赖
<!-- 图片上传oss-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.16.1</version>
</dependency>
获取AccessKey,
获取endpoint
创建配置类:
@Component
public class OSSProperties implements InitializingBean {
@Value("<访问域名>")
private String aliyun_endpoint;
@Value("<AccessId>")
private String aliyun_access_id;
@Value("<AccessKey>")
private String aliyun_access_key;
@Value("<创建bucket的名字>")
private String aliyun_bucket;
@Value("<存储的路径>")
private String aliyun_dir;
// 声明静态变量
public static String ALIYUN_ENDPOINT;
public static String ALIYUN_ACCESS_ID;
public static String ALIYUN_ACCESS_KEY;
public static String ALIYUN_BUCKET;
public static String ALIYUN_DIR;
@Override
public void afterPropertiesSet() {
ALIYUN_ENDPOINT = aliyun_endpoint;
ALIYUN_ACCESS_ID = aliyun_access_id;
ALIYUN_ACCESS_KEY = aliyun_access_key;
ALIYUN_BUCKET = aliyun_bucket;
ALIYUN_DIR = aliyun_dir;
}
}
创建ossutil工具类:
public class OSSUtil {
/**
* log日志
*/
public static final Logger logger = LoggerFactory.getLogger(OSSUtil.class);
private final String endpoint = OSSProperties.ALIYUN_ENDPOINT;
private final String accessKeyId = OSSProperties.ALIYUN_ACCESS_ID;
private final String accessKeySecret = OSSProperties.ALIYUN_ACCESS_KEY;
private final String bucketName = OSSProperties.ALIYUN_BUCKET;
private final String FOLDER = OSSProperties.ALIYUN_DIR;
/**
* 删除单个图片
*
* @param url
*/
public void deleteImg(String url) {
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
url = FOLDER + url;
ossClient.deleteObject(bucketName, url);
System.out.println("删除 " + url + " 成功");
ossClient.shutdown();
}
/**
* 上传图片
*
* @param file
* @param fileName
* @return
* @throws IOException
*/
public String uploadImg2Oss(MultipartFile file, String fileName) throws IOException {
try {
InputStream inputStream = file.getInputStream();
this.uploadFile2OSS(inputStream, fileName);
String url = "https://" + bucketName + "." + endpoint + "/" + FOLDER + fileName;
return url;
} catch (Exception e) {
throw new IOException("图片上传失败");
}
}
/**
* 上传到OSS服务器 如果同名文件会覆盖服务器上的
*
* @param instream 文件流
* @param fileName 文件名称 包括后缀名
* @return 出错返回"" ,唯一MD5数字签名
*/
public String uploadFile2OSS(InputStream instream, String fileName) {
String ret = "";
try {
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
// 上传文件
PutObjectResult putResult = ossClient.putObject(bucketName, FOLDER + fileName, instream, objectMetadata);
ret = putResult.getETag();
} catch (IOException e) {
// logger.error(e.getMessage(), e);
System.out.println(e.getMessage());
} finally {
try {
if (instream != null) {
instream.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return ret;
}
/**
* Description: 判断OSS服务文件上传时文件的contentType
*/
public static String getcontentType(String filenameExtension) {
if (filenameExtension.equalsIgnoreCase("bmp")) {
return "image/bmp";
}
if (filenameExtension.equalsIgnoreCase("gif")) {
return "image/gif";
}
if (filenameExtension.equalsIgnoreCase("jpeg") || filenameExtension.equalsIgnoreCase("jpg")
|| filenameExtension.equalsIgnoreCase("png")) {
return "image/jpeg";
}
if (filenameExtension.equalsIgnoreCase("html")) {
return "text/html";
}
if (filenameExtension.equalsIgnoreCase("txt")) {
return "text/plain";
}
if (filenameExtension.equalsIgnoreCase("vsd")) {
return "application/vnd.visio";
}
if (filenameExtension.equalsIgnoreCase("pptx") || filenameExtension.equalsIgnoreCase("ppt")) {
return "application/vnd.ms-powerpoint";
}
if (filenameExtension.equalsIgnoreCase("docx") || filenameExtension.equalsIgnoreCase("doc")) {
return "application/msword";
}
if (filenameExtension.equalsIgnoreCase("xml")) {
return "text/xml";
}
return "image/jpeg";
}
/**
* 获得url链接
*
* @param key
* @return
*/
public String getUrl(String key) {
// 设置URL过期时间为10年 3600l* 1000*24*365*10
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10);
// 生成URL
URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
// url = "https://" + bucketName + ".oss-cn-beijing.aliyuncs.com/" + bucketName+"/"+ key;
if (url != null) {
String host = "https://" + url.getHost() + url.getPath();
return host;
}
return "";
}
}
文件上传接口:使用时前端发送请求到该接口完成图片存储
@RequestMapping("/skuUpload")
@ResponseBody
public Map<String, Object> skuUpload(MultipartFile file){
Map<String, Object> map = new HashMap<>();
Map<String, Object> map2 = new HashMap<>();
// 原始文件名称,如a.png
String fileName = file.getOriginalFilename();
String newFileName = System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
OSSUtil ossUtil = new OSSUtil();
try {
String url = ossUtil.uploadImg2Oss(file, newFileName);
map2.put("url", url);
map.put("msg","上传图片成功");
map.put("code",200);
map.put("data",map2);
return map;
} catch (IOException e) {
e.printStackTrace();
map.put("errno",1);
map.put("message","上传图片失败");
return map;
}
}
g2Oss(file, newFileName);
map2.put("url", url);
map.put("msg","上传图片成功");
map.put("code",200);
map.put("data",map2);
return map;
} catch (IOException e) {
e.printStackTrace();
map.put("errno",1);
map.put("message","上传图片失败");
return map;
}
}