通过异步请求上传文件到七牛云

Amour恋空

于 2024-06-03 17:42:40 发布

阅读量408

点赞数 6

分类专栏：笔记工具文件上传文章标签： java 七牛云存储 ajax

本文链接：https://blog.csdn.net/qq_38186465/article/details/139420055

版权

笔记同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

工具

6 篇文章 0 订阅

订阅专栏

文件上传

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、准备工作

创建账号、创建空间这种大家自己研究就行(有手就行)
只需要根据步骤查找对应文档

从服务端获取七牛云上传的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")
    @ResponseBody
    public 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">
    //生成一个用不重复的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://localhost:8080/file/upload",//请求后台获取token
                dataType: 'json',
                success: function(result) {
                	//获取后台返回的token
                    console.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('数据有误')

                        }
                    });

Amour恋空

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通过异步请求上传文件到七牛云

基于准备工作1中，我们基于自己的公钥私钥与存储空间获取了token，我们需要后台书写代码返回token给前端。从服务端获取七牛云上传的token,生成token参考。//把下面对应的demo粘贴过来(注意修改参数)// 可以作为常量放到random外面。//基于前端技术将文件上传至七牛云。// 生成32位长度的字符串。//获取后台返回的token。//生成一个用不重复的ID。//上传的本地文件绝对路径。//请求后台获取token。//服务器响应失败处理函数。在七牛云文档查找上传的。
复制链接

扫一扫