qianran 80行代码 实现前端html 七牛云上传 H5
2025年我把之前这个项目的代码翻出来了，恰巧刷自己的博客又刷到了这篇博文，现如今已经不再需要这种文章记录了，使用豆包或deepseek之类的国产大模型即可快速生成类似于下方功能的代码，真是感慨AI改变世界。
上传七牛云一般有两种方式
第一种：是前端先传递给后端，后端再上传到七牛云，后端存储文件外链
第二种：后端给前端上传的token，前端直接请求七牛云上传文件，再将上传后的外链给后端
显然第二种方式更加节省带宽，节约服务器性能，七牛云官方的文档已经非常全面了，在这里用最简单的形式再实现一下。
后端SDK下载：https://developer.qiniu.com/kodo/sdk/1240/objc
前端开发文档：https://developer.qiniu.com/kodo/sdk/1283/javascript
说明一下：后端返回的接口中data.token 是后端算法生成，七牛云有多种sdk可直接调用
data.doman是cdn空间绑定的域名，在上传图片前前端随机生成了一个文件名传递到七牛云避免重名问题
下面粘贴代码，改下接口就能用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<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"> //生成一个用不重复的ID function 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://192.168.1.27/api/tool/qiniu", dataType: 'json', success: function(result) { result.imgUrl = GenNonDuplicateID() + getType(fileName); if (result.code == 0) { var observer = { //设置上传过程的监听函数 next(result) { //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性) Math.floor(result.total.percent); //查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)] }, error(err) { //失败后 alert(err.message); }, complete(res) { //成功后 console.log() // ?imageView2/2/h/100：展示缩略图，不加显示原图 // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高 $("#image").attr("src", result.data.domain + "/"+result.imgUrl + "?imageView2/2/w/400/h/400/q/100"); } }; var putExtra = { fname: "", //原文件名 params: {}, //用来放置自定义变量 mimeType: null //限制上传文件类型 }; var config = { region: qiniu.region.z2, //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别) //现在是华南的服务器 concurrentRequestLimit: 3 //分片上传的并发请求量 }; console.log(result); var observable = qiniu.upload(file, result.imgUrl, result.data.token, putExtra, config); var subscription = observable.subscribe(observer); // 上传开始 // 取消上传 // subscription.unsubscribe(); } else { alert(result.message); //获取凭证失败 } }, 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> |
