springboot+vue项目中如何利用七牛云实现头像的上传

做了个前后端分离的项目，对于用户的头像修改一直不是很满意，

于是用了Vant4的组件库改成了文件点击上传，先是打算存到本地，了解到七牛云的方便后（主要是免费），决定改成七牛云存储图片，记录一下操作，方便查看复习

目录

一、七牛云

七牛云简介

七牛云使用

二、前端vue配置

三、后端springboot配置

---

一、七牛云

七牛云简介

七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化PaaS服务。围绕富媒体场景，七牛先后推出了对象存储，融合CDN加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

七牛云对象存储 Kodo 是七牛云提供的高可靠、强安全、低成本、可扩展的存储服务。您可通过控制台、API、SDK 等方式简单快速地接入七牛存储服务，实现海量数据的存储和管理。通过 Kodo 可以进行文件的上传、下载和管理。

总的来说：七牛云是为开发服务的云存储环境，可以在七牛云上托管静态文件资源，并且进行下载，还有很多七牛云的sdk。
具体有关七牛云的介绍可以参考开发文档：https://developer.qiniu.com/kodo
 

七牛云使用

首先去官网注册  七牛云

登录注册就不再说了，注册完毕之后，点击个人中心，进行身份认证

当身份认证完成之后，点左上角创建存储空间，点这个对象存储Kodo

 点击空间管理，新建存储空间，

让你输入空间名称还有存储区域以及访问控制，按照要求填写即可

现在就有了一个个人仓库了，系统会给我们分配一个测试域名，不过这个域名只有30天有效期，我们可以先用这个域名进行测试，后面来绑定自己的域名

点击空间管理，进入域名管理，即可以添加绑定域名

记住域名一定要是备案域名

二、前端vue配置

这里本人用的是vant4组件

三、后端springboot配置

.在pom.xml添加七牛云依赖

        
        
            com.qiniu
            qiniu-java-sdk
            7.2.11
        
        
        
            com.google.code.gson
            gson
            2.8.6
        

controller层

@Controller
@RequestMapping("upload")
public class uploadimg {
    @PostMapping("/img")
    @ResponseBody
    public void up1img(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return;
        }
        String fileName = file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        QiniuOssUtils utils = new QiniuOssUtils();
        String upload = utils.upload(inputStream, fileName);
        System.out.println(upload);
    }
}

工具类方法，记得换成你自己的AK和CK以及域名

七牛云的配置信息都可以在个人中心拿到，其中AK和SK：点击密钥管理

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;

/**
 * 七牛OSS管理工具
 */
public class QiniuOssUtils {

    /**
     * 存储空间名
     */
    private static final String BUCKET = "空间名";
    /**
     * accessKey和secretKey
     */
    private static final String ACCESS_KEY = "AK";
    private static final String SECRET_KEY = "CK";
    /**
     * 外网访问地址(内置域名有效期只有30天)
     */
    private static final String BASE_URL = "域名+/";

    /**
     * 上传管理器
     */
    private UploadManager upload;
    /**
     * 桶管理器（存储空间管理器）
     */
    private BucketManager bucket;

    public QiniuOssUtils() {
        //创建配置对象
        Configuration cfg = new Configuration(Zone.zone2());
        //创建上传管理器
        upload = new UploadManager(cfg);
        //创建存储空间管理器
        bucket = new BucketManager(getAuth(), cfg);
    }

    /**
     * 返回认证器（包含的访问密钥）
     *
     * @return
     */
    private Auth getAuth() {
        return Auth.create(ACCESS_KEY, SECRET_KEY);
    }

    /**
     * 获取令牌对象（服务器返回的授权信息）
     *
     * @return
     */
    private String getToken() {
        return getAuth().uploadToken(BUCKET);
    }

    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    public String upload(File file, String key) {
        try {
            return upload(new FileInputStream(file), key);
        } catch (FileNotFoundException | QiniuException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 上传文件
     *
     * @param is
     * @param key
     * @return
     * @throws QiniuException
     */
    public String upload(InputStream is, String key) throws QiniuException {
        //上传流
        Response response = upload.put(is, key, getToken(), null, null);
        //解析返回结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        //将文件的访问地址返回
        return BASE_URL + putRet.key;
    }

    /**
     * 删除文件
     *
     * @param key
     */
    public void delete(String key) {
        try {
            bucket.delete(BUCKET, key);
        } catch (QiniuException e) {
            e.printStackTrace();
        }
    }
}

查看的话，可以在代码中修改，将图片路径存储到数据库中，

查看时到数据库中将路径查询出来，返给前端，前端拿到链接访问即可。

最终效果是这样

 我们也可以来看一下七牛云后台管理的图片信息

 感谢你能看完，如果对你有帮助的话，点个赞支持下