springboot将图片上传至七牛云服务器(超详细)

5 篇文章 0 订阅
2 篇文章 0 订阅

我们在公司的业务开发中,经常会接触到图片上传功能,有很多小伙伴都会在这里遇坑,特别是将图片上传至七牛云服务器上,网上的很多讲解也都很不明确。那么今天我们就要来讲一讲如何将本地的图片上传至七牛云服务器上,配合步骤自己做一个小的demo吧!本文章很适合新手入门学习哦!

一.注册七牛云账号

首先我们需要申请一个七牛云账号,登录七牛云网站进行注册,注册成功后登录并进入管理控制台
在这里插入图片描述
进入控制台后点击左边的对象存储
在这里插入图片描述
点击进入后我们新建一个储存空间,具体的步骤就不多做赘述了,新建空间完成后,七牛云会给我们一个测试用的域名,只有30天的有效时间,30天后自动失效。
在这里插入图片描述
到这里为止,七牛云方面就准备完毕了,不过页面先不要关,一会我们在配置信息时还需要使用里面的一些东西。

二.springboot整合七牛云sdk

项目方面我们使用的是当今比较流行的springboot搭建,springboot项目还不熟悉的小伙伴可以先去补习一下,非常简单,如果有需要也可以留言,我会写一篇springboot项目搭建的过程,此文章就不多赘述了,直接开始项目。
首先,我们复制七牛云的相关maven依赖到pom.xml中。


        <!--七牛配置依赖-->
        <!-- 七牛云 -->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>[7.2.0, 7.2.99]</version>
        </dependency>
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>3.3.1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.6.2</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>happy-dns-java</artifactId>
            <version>0.1.4</version>
            <scope>compile</scope>
        </dependency>

然后我们在项目配置文件中编写我们七牛云的配置,我这里使用的是application.yml,使用application.properties的请自行调整,具体看图
在这里插入图片描述
这里重点来了,说一下里面的配置内容,首先accessKey和secreKey这两个内容可以在我们的七牛云账号中找到,路径为七牛云个人中心-》密钥管理。将里面的两个内容分别复制进去。


# 七牛云配置
# bucket是创建的存储空间名
# path对应存储空间的访问域名
qiniu:
  accessKey:
  secretKey: 
  bucket: 
  path: 

baseUploadUrl: d://temp/

在这里插入图片描述
然后配置文件中的bucket就是我们最初创建的空间名,path就是我们的测试域名,分别复制进去就好了。
接下来我们做一下七牛云的上传配置,在项目下新建conf目录,并新建FileUploadConfig类,将以下代码复制进去

package com.cpj.conf;

import com.google.gson.Gson;
import com.qiniu.common.Zone;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.autoconfigure.web.servlet.MultipartProperties;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.boot.web.servlet.MultipartConfigFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.support.StandardServletMultipartResolver;
import org.springframework.web.servlet.DispatcherServlet;

import javax.servlet.MultipartConfigElement;
import javax.servlet.Servlet;
import java.io.File;

@Configuration
@ConditionalOnClass({Servlet.class, StandardServletMultipartResolver.class, MultipartConfigElement.class})
@ConditionalOnProperty(prefix = "spring.http.multipart", name = "enabled", matchIfMissing = true)
@EnableConfigurationProperties(MultipartProperties.class)
public class FileUploadConfig {


    private final MultipartProperties multipartProperties;

    @Value("${baseUploadUrl}")
    private String baseUploadUrl;

    @Value("${qiniu.accessKey}")
    private String accessKey;

    @Value("${qiniu.secretKey}")
    private String secretKey;

    public FileUploadConfig(MultipartProperties multipartProperties) {
        this.multipartProperties = multipartProperties;
    }

    /**
     * 上传配置
     */
    @Bean
    @ConditionalOnMissingBean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        judge(baseUploadUrl);
        factory.setLocation(baseUploadUrl);
        return factory.createMultipartConfig();
    }

    public void judge(String filePath){
        File file = new File(filePath);
        if(!file.exists()){
            file.mkdir();
        }
    }

    /**
     * 注册解析器
     */
    @Bean(name = DispatcherServlet.MULTIPART_RESOLVER_BEAN_NAME)
    @ConditionalOnMissingBean(MultipartResolver.class)
    public StandardServletMultipartResolver multipartResolver() {
        StandardServletMultipartResolver multipartResolver = new StandardServletMultipartResolver();
        multipartResolver.setResolveLazily(this.multipartProperties.isResolveLazily());
        return multipartResolver;
    }

    /**
     * 华东机房
     */
    @Bean
    public com.qiniu.storage.Configuration qiniuConfig() {
        return new com.qiniu.storage.Configuration(Zone.zone0());
    }

    /**
     * 构建一个七牛上传工具实例
     */
    @Bean
    public UploadManager uploadManager() {
        return new UploadManager(qiniuConfig());
    }


    /**
     * 认证信息实例
     *
     * @return
     */
    @Bean
    public Auth auth() {
        return Auth.create(accessKey, secretKey);
    }

    /**
     * 构建七牛空间管理实例
     */
    @Bean
    public BucketManager bucketManager() {
        return new BucketManager(auth(), qiniuConfig());
    }

    /**
     * 配置gson为json解析工具
     *
     * @return
     */
    @Bean
    public Gson gson() {
        return new Gson();
    }
}

baseUploadUrl是我自定义的本地文件路径,七牛云在图片上传时会在本地临时存储一个文件,可以自己在配置文件中定义,不需要和我的一样。
如果以上步骤都做完并且没问题的话,那么我们的基本配置就全部准备完成了,下面我们开始service的开发。

三.图片上传开发

首先我们在service目录下新建FileService接口

package com.cpj.service.upload;

import com.qiniu.common.QiniuException;

import java.io.File;
import java.util.Map;

public interface FileService {

    /**
     * @Author : 
     * @Description : //TODO 多文件上传
     * @Date : 10:04 2019/4/3
     * @Param :
     * @return :
     **/
    Map uploadFile(File file) throws QiniuException;

}

并且新建该接口的实现类

package com.cpj.service.upload;

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.io.File;
import java.util.HashMap;
import java.util.Map;

/**
 * @author :
 * @ClassName :FileServiceImpl
 * @date : 2019/4/3 10:05
 * @description : TODO
 */
@Service
public class FileServiceImpl implements FileService {


    @Autowired
    private UploadManager uploadManager;

    @Autowired
    private Auth auth;


    @Value("${qiniu.bucket}")
    private String bucket;


    private StringMap putPolicy;

    @Override
    public Map uploadFile(File file) throws QiniuException {
        Map map = new HashMap();
        Response response = this.uploadManager.put(file,null,getUploadToken());
        //解析上传的结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);

        String imageName = putRet.hash;
        int retry = 0;
        while(response.needRetry() && retry < 3){
            response = this.uploadManager.put(file,null,getUploadToken());
        }
        map.put("response",response);
        map.put("imgName",imageName);
        return map;
    }



    private String getUploadToken(){
        return this.auth.uploadToken(bucket,null,3600,putPolicy);
    }



}

将以上代码全部复制到自己的项目当中,图片上传的service层就完成了,一点也不复杂,直接看就可以看懂,所以我这里也不多废话了,接下来我们写controller层的代码。

package com.cpj.controller;

import com.cpj.service.upload.FileService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
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.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

/**
 * @author :
 * @ClassName :UploadController
 * @date : 2019/4/1 17:47
 * @description : TODO
 */
@RestController
@RequestMapping("/upload")
@Api(tags = "图片上传接口")
public class UploadController {


    @Autowired
    FileService fileService;

    @Value("${baseUploadUrl}")
    private String url;

    @PostMapping(value = "/uploadImg")
    @ApiOperation(value = "单个图片上传到七牛云")
    public Map<String,Object> uploadImg(@RequestParam(value = "file")MultipartFile upfile) throws IOException {
        Map<String,Object> map = new HashMap<>();
        String fileName = upfile.getOriginalFilename();
        File file = new File(url + fileName);
        try{
			//将MulitpartFile文件转化为file文件格式
            upfile.transferTo(file);
            Map response = fileService.uploadFile(file);
            Object imageName = response.get("imgName");
            map.put("url",imageName);
            map.put("state","SUCESS");
        }catch (Exception e){
            e.printStackTrace();
        }
        return map;
    }
}

controller层的代码其实可以封装到service中,但是我这里为了区分作用,就直接写在这里了,map中的url就是我们上传到七牛云之后我们图片的名字,通过我们之前的域名+这个名字就可以进行访问了。
如果都编写完了,我们可以用swagger进行测试看看功能是否正常,swagger的用法这里不多赘述了,感兴趣的小伙伴快去补习补习吧,真的很好用哦。
到此为止所有的上传图片的功能就结束了,不知道这篇文章有没有帮助到你呢?

  • 9
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
1. 首先,需要在七牛云上创建一个存储空间,并获取该存储空间的accessKey、secretKey、bucket和domain。 2. 在Springboot中引入七牛云的Java SDK,可以通过Maven或Gradle进行引入。例如,在Maven中添加以下依赖: ``` <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency> ``` 3. 创建一个七牛云的配置类,用于存储accessKey、secretKey、bucket和domain等配置信息。 ``` @Configuration public class QiniuConfig { @Value("${qiniu.accessKey}") private String accessKey; @Value("${qiniu.secretKey}") private String secretKey; @Value("${qiniu.bucket}") private String bucket; @Value("${qiniu.domain}") private String domain; @Bean public Auth auth() { return Auth.create(accessKey, secretKey); } @Bean public Configuration configuration() { return new Configuration(Zone.zone0()); } @Bean public UploadManager uploadManager() { return new UploadManager(configuration()); } @Bean public BucketManager bucketManager() { return new BucketManager(auth(), configuration()); } @Bean public StringMap putPolicy() { StringMap putPolicy = new StringMap(); putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"name\":\"$(fname)\",\"size\":$(fsize)}"); return putPolicy; } @Bean public String uploadToken() { return auth().uploadToken(bucket, null, 3600, putPolicy()); } @Bean public String domain() { return domain; } } ``` 4. 在Vue中使用element-ui的上组件,设置上的接口为Springboot的接口。 ``` <el-upload class="upload-demo" action="/api/upload" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="{Authorization: 'Bearer ' + token}" > <el-button size="small" type="primary">点击上</el-button> <div slot="tip" class="el-upload__tip">只能上jpg/png文件,且不过500kb</div> </el-upload> ``` 5. 在Springboot中编写上接口,在该接口中使用七牛云的Java SDK进行上。 ``` @RestController @RequestMapping("/api") public class UploadController { @Autowired private UploadManager uploadManager; @Autowired private String uploadToken; @Autowired private String domain; @PostMapping("/upload") public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) throws IOException { try { Response response = uploadManager.put(file.getBytes(), null, uploadToken); if (response.isOK()) { String key = JSON.parseObject(response.bodyString()).getString("key"); return ResponseEntity.ok(domain + "/" + key); } } catch (QiniuException e) { e.printStackTrace(); } return ResponseEntity.badRequest().build(); } } ``` 6. 程序运行后,在Vue中上图片即可自动将图片到七牛云,并返回图片的访问URL。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值