一、准备工作
创建账号、创建空间这种大家自己研究就行(有手就行)
只需要根据步骤查找对应文档
-
从服务端获取七牛云上传的token,生成token参考官方文档
-
在七牛云文档查找上传的存储区域
-
在七牛云控制台找到空间管理的cdn加速域名
二、后台token获取
基于准备工作1中，我们基于自己的公钥私钥与存储空间获取了token，我们需要后台书写代码返回token给前端
FileUploadController.java
import com.qiniu.util.Auth;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class FileUploadController {@RequestMapping("/file/upload")@ResponseBodypublic String token(String fileName){String accessKey = "你的公钥";String secretKey = "你的私钥";String bucket = "你的存储空间名称";String key = fileName;Auth auth = Auth.create(accessKey, secretKey);String upToken = auth.uploadToken(bucket, key);//这返回的格式任意反正前端能获取到就行return "{\"token\":\""+upToken+ "\"}";}
}
三、前端文件上传
因为前端实现文件上传技术有很多，所以给大家分别写了几个demo
通用页面
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.1.2/qiniu.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">//生成一个用不重复的IDfunction GenNonDuplicateID() { // 生成32位长度的字符串var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; // 可以作为常量放到random外面var result = "";for (var i = 0; i < 32; i++) {result += str[parseInt(Math.random() * str.length)];}return result;}//获取文件后缀function getType(file) {var filename = file;var index1 = filename.lastIndexOf(".");var index2 = filename.length;var type = filename.substring(index1, index2);return type;}$(function() {$("#upload").on("click", function() {var obj = $("#file");var fileName = obj.val(); //上传的本地文件绝对路径var suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length); //后缀名var file = obj.get(0).files[0]; //上传的文件var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 *1024 * 1024)).toFixed(2) + 'GB' : (file.size /(1024 * 1024)).toFixed(2) + 'MB' : (file.size /1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; //文件上传大小$.ajax({type: 'post',url: "http://localhost:8080/file/upload",//请求后台获取tokendataType: 'json',success: function(result) {//获取后台返回的tokenconsole.log(result.token);//基于前端技术将文件上传至七牛云//把下面对应的demo粘贴过来(注意修改参数)},error: function() { //服务器响应失败处理函数alert("服务器繁忙");}});})})
</script>
<body>
<input type="file" name="image" id="file" accept="image/*">
<input type="button" id="upload" value="upload">
<img id="image" src="#" alt="">
</body>
</html>
3.1 使用axios上传文件
cdn加速域名+上传成功返回的key就是图片的url地址
let fd= new FormData()fd.append('file', file, file.name );//file是文件对象fd.append('token', token ); //从后端获取到的token let ajax = axios.create({withCredentials: false});ajax({url: 'https://up-z1.qiniup.com',//根据前面存储空间存储区域选择对应的url 比如我的是华北的data: fd,method: 'POST',onUploadProgress: (progress)=> {//根据前面文件大小与返回参数中的数据可以做进度条},}).then((res)=>{console.log(res)let url = 'https://se8mhjfs0.hb-bkt.clouddn.com/' + res.data.key // 这个是上图三的地址 用于图片上传后的回显}).catch((res)=>{console.log(res) })
3.2 使用jquery的ajax上传文件
let fd= new FormData()fd.append('file', file,GenNonDuplicateID() + getType(fileName) );//file是文件对象fd.append('token', token ); //从后端获取到的token//七牛云上传$.ajax({url:"https://up-z1.qiniup.com",type:'POST',data:fd,cache: false, //需要这个配置contentType: false, //需要这个配置processData: false, //需要这个配置success:function(res){console.log(res)let url = 'https://se8mhjfs0.hb-bkt.clouddn.com/' + res.data.key // 这个是上图三的地址 用于图片上传后的回显},error:function(){console.log('数据有误')}});
![[FreeRTOS 基础知识] 栈](https://img-blog.csdnimg.cn/direct/7aa2ef588d3e4e9a97c3ac989bd824bc.png)
