图片存储上传的两种方式-nginx本地存储上传图片以及OSS对象存储

关于图片存储:

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;
    }

}
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值