七牛上传图片（前台JS+后台C#API获取token）

最新推荐文章于 2023-06-02 15:35:14 发布

小猫学游戏

最新推荐文章于 2023-06-02 15:35:14 发布

阅读量3.4k

点赞数

分类专栏： C# 文章标签：七牛

本文链接：https://blog.csdn.net/Tomato2313/article/details/56916124

版权

C# 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇文章是2017年写的，如果您正在尝试查找七牛ＪＳ上传文件的相关教程，请直接查看七牛最新的官方文档我会在后续补上最新的JS上传说明！

尽量精简，下载demo后填写相应参数可直接使用。

一：后台获取token

需要准备的东西：
1、AccessKey(AK): 在七牛-个人面板-密钥管理-查看;
2、SecretKey(SK) : 在七牛-个人面板-密钥管理-查看;
3、目标空间名（bucket）；在对象存储-存储空间列表查看；
4、引入 Newtonsoft.Json.dll ：放在最后下载链接中（问题1：版本问题，文章最后说明）；
5、引入 Qiniu.dll ：放在最后下载链接中；

下面是C#完整代码，需要你填写的只有3个部分 AK、SK、bucket

using System.Web.Http;
using Qiniu.Util;

namespace qiniutest001.Controllers
{
    public class TokenController : ApiController
    {
        [HttpGet]
        public string GetToken()
        {
            string AK = "填写你的AK";
            string SK = "填写你的SK";
            // 目标空间名
            string bucket = "填写你的目标空间名";

            // 上传策略
            PutPolicy putPolicy = new PutPolicy();

            putPolicy.Scope = bucket;
            // 上传策略的过期时间(单位:秒)
            putPolicy.SetExpires(3600);

            // 文件上传完毕后，在多少天后自动被删除
            putPolicy.DeleteAfterDays = 1;

            Mac mac = new Mac(AK, SK); 

            // Use AK & SK here
            // 生成上传凭证
            string uploadToken = Auth.createUploadToken(putPolicy, mac);
            return uploadToken;
        }
    }
}

二、前台请求URI地址获取token上传文件

需要准备的东西：
1、ajax请求token的url地址；（问题2：跨域，在文章最后详细说明！）
2、七牛绑定的域名（下载文件使用）；
3、plupload.full.min.js 放在最后下载链接中
4、qiniu.js 放在最后下载链接中
5、jquery.js 放在最后下载链接中
下面是页面全部代码（html）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/plupload.full.min.js"></script>
        <script type="text/javascript" src="js/qiniu.js"></script>
        <script type="text/javascript" src="js/Upimg.js"></script>
    </head>

    <body>
        <div class="item clear" style="border-bottom: solid 1px #cccccc">
            <div id="container1" style="position: relative;">
                <div class="item-lee"></div>
                <a class="Btn" id="pickfiles1" href="#" style="position: relative; z-index: 1;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>选择文件</span>
                </a>
                <!--显示图片的尺寸-->
                <div id="Size1" style="display: inline; margin-left: 20px"></div>
                <!--预留显示信息部分-->
                <div id="msg1" style="display: inline; margin-left: 20px"></div>
                <!--上传文件的名字-->
                <div style="display: inline; margin-left: 20px" id="fileName1"></div>
            </div>
        </div>
    </body>

</html>

接下来是上传文件JS部分，我放在了Upimg.js中，看起来挺多，需要填写的就两个部分url 和 domain
这里我把七牛文档上的东西修改了一点，把需要修改的部分参数放在了方法中，以方法传参的形式传递。
最后是两个检查图片格式跟字节转换单位的方法，可用可不用。


var token;//存储我们从后台获取的token
var url = "这里填写ajax请求地址"
var domain = "这里填写七牛下你绑定的域名（会有一个默认域名）"

//页面加载就开始获取token,在获取token的ajax中，如果获取token成功，就开始上传文件！
$(document).ready(function () {
    //获取token
    getToken();

    //初始化上传程序
    //UpLoadImg(“选择文件按钮的ID”，“上传成功后展示信息的ID”，“上传成功后展示文件大小区域的ID”，“上传文件成功后展示文件名字的ID”)
    UpLoadImg('pickfiles1', 'container1', '#msg1', '#Size1', '#fileName1');
});

//获取token
function getToken() {
    $.ajax({
        type: "GET",
        url: url,
        async:false,
        success: function(data) {
            token = data;
        },
        error: function() {},
        beforeSend: function() {}
    });
    return token;
}

//UpLoadImg(“选择文件按钮的ID”，“上传成功后展示信息的ID”，“上传成功后展示文件大小区域的ID”，“上传文件成功后展示文件名字的ID”)
function UpLoadImg(button,father,msg,size,fileName)
{
   var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4', //上传模式,依次退化
        browse_button: button, //上传选择的点选按钮，**必需**
        //uptoken_url: '/token',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        uptoken: token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: domain, //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
        container: father, //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '100mb', //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf', //引入flash,相对路径
        max_retries: 3, //上传失败最大重试次数
        dragdrop: true, //开启可拖曳上传
        drop_element: 'container1', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb', //分块上传时，每片的体积
        auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {
                plupload.each(files, function (file) {
                    // 文件添加进队列后,处理相关的事情
                    //if (checkImg(file.name) == false)
                    //{ 
                    //    alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                    //    return;
                    console.log("添加队列");
                    var testImgSrc = file.getNative();
                });
            },
            'BeforeUpload': function (up, file) {
                // 每个文件上传前,处理相关的事情
                console.log("上传前");
            },
            'UploadProgress': function (up, file) {
                // 每个文件上传时,处理相关的事情

                console.log("上传时");
                $(msg).text('正在上传···');
            },
            'FileUploaded': function (up, file, info) {
                // 每个文件上传成功后,处理相关的事情
                // 其中 info 是文件上传成功后，服务端返回的json，形式如
                // {
                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                //    "key": "gogopher.jpg"
                //  }
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                var domain = up.getOption('domain');
                var res = JSON.parse(info);
                var sourceLink = domain + res.key; //获取上传成功后的文件的Url

                console.log("上传成功：" + sourceLink);

                $(msg).text('上传成功!!');
                $(size).text(bytesToSize(file.size));
                $(fileName).text('文件名：' + file.name);

            },
            'Error': function (up, err, errTip) {
                //上传出错时,处理相关的事情
                console.log("上传出错");
                alert(err);
            },
            'UploadComplete': function () {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                //var key = "";
                // do something with key here
                //return key
            }
        }
    });
}

//function checkImg(url) {
//  
//  if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {
//      return false;
//  }
//  else {
//      return true;
//  }
//}
//----------------------
//引入Plupload 、qiniu.js后
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取


//转换大小
function bytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    var k = 1024;
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    i = Math.floor(Math.log(bytes) / Math.log(k));
    return (Math.ceil(bytes / Math.pow(k, i))) + ' ' + sizes[i];
    //toPrecision(3) 后面保留一位小数，如1.0GB                                                                                                                  //return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];  
}

到此全部代码都已经结束了。

三、演示方式

1、首先是后台获取token,打开项目后，在Controllers-TokenController.cs中填写相应参数，然后启动，在网页中即可查看。
2、在后台启动后，不要关闭程序，前台填写相应参数，点击”文件上传“。

问题1：由于webAPi 项目自带Newtonsoft.Json.dll，需要在webcofig中修改版本号；
问题2：由于是本地演示，ajax请求会出现跨域问题，在webconfig中添加
只需要在web.config中添加如下的内容即可

<system.webServer>
<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
    </httpProtocol>

</system.webServer>

完整项目下载链（小小的浪费您1积分）接：http://download.csdn.net/download/tomato2313/9763445

小猫学游戏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
七牛上传图片（前台JS+后台C#API获取token）

尽量精简，下载demo后填写相应参数可直接使用。一：后台获取token需要准备的东西： 1、AccessKey(AK): 在七牛-个人面板-密钥管理-查看; 2、SecretKey(SK) : 在七牛-个人面板-密钥管理-查看; 3、目标空间名（bucket）；在对象存储-存储空间列表查看； 4、引入 Newtonsoft.Json.dll ：放在最后下载链接中（问题1：版
复制链接

扫一扫