本来打算做一个全部都是前端完成的资源上传到七牛云的demo，但是需要获取token，经历了九九八十一难，最终还是选择放弃，token从后端获取（springboot）。如果你们有前端直接能解决的麻烦记得私我哦！！！

效果展示

先看看文档：
element ui ：https://element.eleme.cn/
七牛云：https://developer.qiniu.com/kodo/1283/javascript

前端

1. 首先安装七牛云的JS的sdk

npm install qiniu-js 

2. 此处域名是指向你自己的七牛云域名，目的是让照片回显。如何在七牛云中找到自己的域名请看下面。
   
   3 .七牛云中找到自己的域名

JS

后端

技术：springboot、maven…

1. 引入maven

                              com.qiniu             qiniu-java-sdk             7.2.7          

2. 编写controller代码

package com.admin.controller.admin.email;  import com.common.util.QiniuUtil; import com.system.constant.HTTPStatus; import com.system.response.Result; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController;  /**  * @Classname QiniuController  * @Date 2023/8/8 13:32  * @Created ZFC  */ @RestController @RequestMapping("/sys/qiniu") public class QiniuController {      @GetMapping("/getUpToken")     public Result getUpToken(@RequestParam(value = "key", required = false) String key){         return new Result().setCode(HTTPStatus.SUCCESS).setData(QiniuUtil.getToken(key));     } }  

3. util代码

import com.qiniu.util.Auth; import lombok.extern.slf4j.Slf4j;  @Slf4j public class QiniuUtil {      public static String getToken(String key) {         Auth auth = Auth.create(***ACCESS_KEY***, ***SECRET_KEY***);         return auth.uploadToken(***BUCKET***, key);     } } 

4. 获取相关参数
   ACCESS_KEY、SECRET_KEY
   BUCKET