Springboot实现七牛云图片上传。

1.为什么选择七牛云？

七牛云提供了免费使用云存储的功能：普通用户每月可以免费使用10GB的存储空间、每月免费下载的流量达到10GB、每月免费PUT/DELETE 10万次请求以及每月免费GET 100万次请求。对于普通的网站，完全够我们使用。

2.Springboot实现七牛云上传接口

pom.xml引入依赖。

<!--七牛云上传图片服务-->
<!-- https://mvnrepository.com/artifact/com.qiniu/qiniu-java-sdk -->
<dependency>
   <groupId>com.qiniu</groupId>
   <artifactId>qiniu-java-sdk</artifactId>
   <version>7.2.7</version>
</dependency>

在application.yml中添加七牛云用户配置

#七牛云的配置
qiniu:
  access_key: xxxxxxxxxxxxxxxxxxxxxxxx   #七牛云的AK
  secret_key: xxxxxxxxxxxxxxxx           #七牛云的SK
  bucket_name: test-01                   #七牛云的BucketName
  domain_name: http://rterwfsdfew-bkt.clouddn.com/   #七牛云提供的免费域名

文件上传服务层实现。

QiniuService.java

public interface QiniuService {
    public String saveImage(MultipartFile file) throws IOException;
}

QiniuServiceImpl.java

@Service
public class QiniuServiceImpl implements QiniuService {

    private static final Logger logger = LoggerFactory.getLogger(QiniuService.class);

    @Value("${qiniu.access_key}")
    // 设置好账号的ACCESS_KEY和SECRET_KEY
    private String ACCESS_KEY="";
    @Value("${qiniu.secret_key}")
    private String SECRET_KEY="";
    // 要上传的空间
    @Value("${qiniu.bucket_name}")
    private String bucketname="";

    // 测试域名，只有30天有效期
    @Value("${qiniu.domain_name}")
    private String QINIU_IMAGE_DOMAIN;

    // 密钥配置
    Auth auth ;
    // 构造一个带指定Zone对象的配置类,不同的七云牛存储区域调用不同的zone
    Configuration cfg;
    // ...其他参数参考类注释
    UploadManager uploadManager;

    @PostConstruct
    public void init() {
        auth = Auth.create(ACCESS_KEY, SECRET_KEY);
        cfg = new Configuration(Zone.huanan());
        uploadManager = new UploadManager(cfg);
    }

    // 简单上传，使用默认策略，只需要设置上传的空间名就可以了
    public String getUpToken() {
        return auth.uploadToken(bucketname);
    }

    public String saveImage(MultipartFile file) throws IOException {
        try {
            int dotPos = file.getOriginalFilename().lastIndexOf(".");
            if (dotPos < 0) {
                return null;
            }
            String fileExt = file.getOriginalFilename().substring(dotPos + 1).toLowerCase();
            // 判断是否是合法的文件后缀
            if (!FileUtil.isFileAllowed(fileExt)) {
                return null;
            }

            String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." + fileExt;
            // 调用put方法上传
            Response res = uploadManager.put(file.getBytes(), fileName, getUpToken());
            // 打印返回的信息
            if (res.isOK() && res.isJson()) {
                // 返回这张存储照片的地址
                return QINIU_IMAGE_DOMAIN + JSONObject.parseObject(res.bodyString()).get("key");
            } else {
                logger.error("七牛异常:" + res.bodyString());
                return null;
            }
        } catch (QiniuException e) {
            // 请求失败时打印的异常的信息
            logger.error("七牛异常:" + e.getMessage());
            return null;
        }
    }
}

FileUtil.java

public class FileUtil {

    // 图片允许的后缀扩展名
    public static String[] IMAGE_FILE_EXTD = new String[]{"png", "bmp", "jpg", "jpeg", "pdf"};

    public static boolean isFileAllowed(String fileName) {
        for (String ext : IMAGE_FILE_EXTD) {
            if (ext.equals(fileName)) {
                return true;
            }
        }
        return false;
    }
}

实现接口。

@RestController
@RequestMapping("qiniu")
public class QiniuController {

    @Autowired
    private QiniuService qiniuService;

    @PostMapping(value = "/upload")
    public R uploadImage(@RequestParam("file") MultipartFile file, HttpServletRequest request) {

        if (file.isEmpty()) {
            return R.fail("上传出现错误！");
        }
        try {
            String fileUrl = qiniuService.saveImage(file);
            return R.success("文件上传成功！", fileUrl);
        } catch (Exception e) {
            e.printStackTrace();
            return R.error("程序出现异常！");
        }
    }
}

3.前端测试页面

前端使用jQuery.ajax调用上传接口。

<form>
  <input class="form-control" style="width: 400px" name="logo" type="file"
  id="formFile"/>
  <input type="hidden" name="logo" id="movie-logo" value=""/>
  <input type="button" style="width: 80px;margin-left: 20px" onclick="doUpload()"
  class="btn app-btn-secondary" value="上传"/>
</form>

...

<script>
   function doUpload() {
        let fd = new FormData();
        fd.append("file", document.getElementById("formFile").files[0]);
        $.ajax({
            url: "http://192.168.6.21:8080/freemoviedemo/qiniu/upload",
            type: "POST",
            data: fd,
            //注意：以下两个参数contentType和processData都必须设置为false;
            contentType : false,
            processData : false,
            dataType: "json",
            success: function (res) {
                console.log(res);
                if (res.code === 200) {
                    console.log("上传成功后的图片URL地址");
                    console.log(res.data);
                    //newMovie.logo = res.data;
                    $("#movie-logo").val(res.data);
                    $("#exampleModal").modal("show"); //显示模态窗口
                    $("#my-model-title").text("上传图片成功！");
                } else {
                    console.log(res.msg);
                }
            },
            error: err => {
                console.log(err);
            }
        })
    }

</script>

前端上传成功后，会返回图片的URL地址。