投稿
  1. IT柚子首页
  2. 开发技术
  3. 后端技术

Asp.net 中使用百度UEditor和七牛存储图片（附源代码）

IT柚子 • • 后端技术 • 阅读 6318

近来做博客要用UEditor来发布文章，其中需要上传图片等文件，上传到自己网站服务器不仅占用空间服务器空间还影响速度，所以决定使用七牛云存储来做图片服务器。下面我分享下如何通过UEditor直接将图片等文件直接上传到七牛服务器中。

下载UEditor

官方下载 

注意事项：

  1. 注意开发语言的选择，这里选择 .Net 版本
  2. 注意网站编码选择，多数情况是UTF-8

下载七牛SDK（C#）

C# SDK下载 

注意事项：

  1. 还没有注册七牛帐号？ 点击注册七牛
  2. SDK是发布在Github上，所以打开有点慢，或者是可以直接使用下面的源代码包中的SDK

配置UEditor和七牛

1、把相关文件附加到项目中

将下载的七牛SDK解压以后附加到解决方案中，将下载的UEditor解压以后复制到项目中（下图）。

 

2、配置UEditor

打开 js –> ueditor1_4_3 –> net –> config.json

修改其中“上传图片配置项（11行）“和“列出指定目录下的图片（77行）”的配置数据

  • imageUrlPrefix=””;  这里取消图片访问路径前缀（上传图片配置项）
  • imagePathFormat； 修改自己的上传图片地址 （这里也可以不用修改，反正后面都会被七牛代替）（上传图片配置项）
  • imageManagerUrlPrefix=””; 这里取消图片访问路径前缀（列出指定目录下的图片）

到这里正常情况下已经可以本地上传图片了。

3、配置七牛

注意添加Newtonsoft.Json.dll的引用，如果没有dll文件，下面的源代码包中有。

打开七牛SDK项目 –>Conf 文件夹 –> Config.cs （下图）

 

修改“帐户信息”配置，七牛提供2中配置方式

  • 直接通过变量写死在里面
  • 通过配置文件来设置（app.config）

实际开发中建议使用第二种，通过配置文件来控制，这样方便扩这和修改。我这里只做演示所以使用第一种。

               
        /// <summary>
        /// 七牛提供的公钥，用于识别用户
        /// </summary>
        public static string ACCESS_KEY = "";
        /// <summary>
        /// 七牛提供的秘钥，不要在客户端初始化该变量
        /// </summary>
        public static string SECRET_KEY = "";

        /// <summary>
        /// 七牛空间名称
        /// </summary>
        public static string BucketName = "";

        /// <summary>
        /// 七牛你的空间的域名信息，格式：http://img.ityouzi.com/ (我的是自定义的)
        /// </summary>
        public static string DomainName = "";

配置参数解释：

  • ACCESS_KEY：七牛提供的公钥。七牛后台首页 –> 帐号  –> 密钥  –> AK（下图）。
  • SECRET_KEY：七牛提供的秘钥。七牛后台首页 –> 帐号  –> 密钥  –> SK（下图）。
  • BucketName：七牛你创建的空间名称。
  • DomainName：七牛你的空间的域名地址。选择空间 –> 空间设置 –> 域名设置 ，如果有自定义域名就用自定义，没有的话就用七牛域名。

Asp.net 中使用百度UEditor和七牛存储图片（附源代码）

4、扩展七牛SKD

七牛SDK上面已经提供很多接口，可惜官方文档不全、代码注释也很少，还有很多简写。。。 官方开发文档

通过SDK我们自己写一个适合自己的工具类（QiniuUtil.cs）。

using Qiniu.Conf;
using Qiniu.IO;
using Qiniu.RS;
using Qiniu.RSF;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;

namespace Qiniu
{
    /// <summary>
    /// 
    /// 时间：2015-6-8 
    /// 作者：邹学典
    /// 版本：V1.0  
    /// 功能：操作七牛的工具类函数
    /// 
    /// </summary>
   public class QiniuUtil
    {

      /// <summary>
      ///  根据起点和数量从七牛服务器上获取文件路径集合
      /// </summary>
      /// <param name="imageCount">服务器上图片总数量</param>
      /// <returns></returns>
       public static string[] GetImageList(ref int imageCount)
       {
           RSFClient client = new RSFClient(Config.BucketName);

           //获取1000000 ，也就是获取服务器上所以的图片数量 ，如果大于1000000 。。。。 
           DumpRet dumpRet = client.ListPrefix(Config.BucketName, "", "", 1000000);
           if (dumpRet == null || dumpRet.Items.Count <= 0) return null;

           //服务器上图片总数量
           imageCount = dumpRet.Items.Count;

           //获取的图片名称，加上自己设置的域名形成图片的绝对地址
           List<string> imagePath = new List<string>();
           foreach (DumpItem item in dumpRet.Items)
               imagePath.Add(Config.DomainName+item.Key);

           return imagePath.ToArray();
       }


       /// <summary>
       /// 上传图片，返回图片的绝对路径（图片在七牛服务器上的地址）
       /// </summary>
       /// <param name="key">文件的名称</param>
       /// <param name="putStream">上传文件的流</param>
       /// <returns></returns>
       public static string UploadImage(string key, Stream putStream)
       {
           //获取token
            var policy = new PutPolicy(Config.BucketName, 3600);
            string upToken = policy.Token();
            PutExtra extra = new PutExtra ();
            IOClient client = new IOClient();

           //发送保存文件的请求
           PutRet result =  client.Put(upToken, key, putStream, extra);
           if (result == null || string.IsNullOrEmpty(result.key) || result.OK == false) return "";

           //返回的文件名称加上自己配置的域名形成图片的完整路径
           return Config.DomainName+ result.key;
       }


       /// <summary>
       /// 获取七牛指定空间中文件的总数量，目前是没用的
       /// </summary>
       /// <returns></returns>
       public static int GetImageCount ()
       {
           RSFClient client = new RSFClient(Config.BucketName);
            DumpRet dumpRet = client.ListPrefix(Config.BucketName, "", "", 10000000);
           if (dumpRet == null || dumpRet.Items.Count <= 0) return 0;

           return dumpRet.Items.Count;
       }


    }
}

其实GetImageList函数是有些问题的，UEditor获取图片列表是ajax分页方式获取的，每次传入页数、每页数量等参数，但是这里确实一次获取了所有的图片。有时间再把这里修改下或者您也可以告诉我。。。

正式对接

1、上传图片

UEditor默认肯定是把图片保存到本地服务器上的，其实大致想想我只需要在保存图片的时候将保存位置修改为七牛服务器即可。

打开 js –> ueditor1_4_3 –> net –> App_Code –> UploadHandler.cs 文件。

注释其中的 Process 函数，然后添加以下代码

        /// <summary>
    /// 修改成对接七牛代码
    /// </summary>
    public override void Process()
    {
        string uploadFileName = null;
        Stream uploadStream = null;

        if (UploadConfig.Base64)
        {
            uploadFileName = UploadConfig.Base64Filename;
        }
        else
        {
            var file = Request.Files[UploadConfig.UploadFieldName];
            uploadFileName = file.FileName;

            if (!CheckFileType(uploadFileName))
            {
                Result.State = UploadState.TypeNotAllow;
                WriteResult();
                return;
            }
            if (!CheckFileSize(file.ContentLength))
            {
                Result.State = UploadState.SizeLimitExceed;
                WriteResult();
                return;
            }
            uploadStream = file.InputStream;
        }

        //时间加随机数生成文件名称
        string saveFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff_") + new Random().Next(1000, 9999) + "" + Path.GetExtension(uploadFileName);
        Result.OriginFileName = saveFileName;

        try
        {
            #region 对接七牛

            string imagePath = QiniuUtil.UploadImage(saveFileName, uploadStream);
            if (string.IsNullOrEmpty(imagePath)) throw new Exception("上传图片失败！");

            #endregion

            Result.Url = imagePath;
            Result.State = UploadState.Success;
        }
        catch (Exception e)
        {
            Result.State = UploadState.FileAccessError;
            Result.ErrorMessage = e.Message;
        }
        finally
        {
            WriteResult();
        }
    }

注意添加七牛SDK项目的应用和引入命名空间。

到此上传图片就搞定了，测试上传文件以后看看七牛空间文件是否已经存在。

2、显示在线图片列表

在多图片上传中有个“在线管理”功能，显示原来上传过的文件，可以直接选择图片而不用再次上传（下图）。

20150617094023798_7256.jpg

打开 js –> ueditor1_4_3 –> net –> App_Code –> ListFileHandler.cs 文件。

注释其中 Process 函数，添加下面的代码

    /// <summary>
    /// 修改后对接七牛代码
    /// </summary>
    public override void Process()
    {
        try
        {
            Start = String.IsNullOrEmpty(Request["start"]) ? 0 : Convert.ToInt32(Request["start"]);
            Size = String.IsNullOrEmpty(Request["size"]) ? Config.GetInt("imageManagerListSize") : Convert.ToInt32(Request["size"]);
        }
        catch (FormatException)
        {
            State = ResultState.InvalidParam;
            WriteResult();
            return;
        }
        var buildingList = new List<String>();
        try
        {
            #region  修改后对接七牛
            FileList = QiniuUtil.GetImageList(ref Total);
            #endregion
        }
        catch (UnauthorizedAccessException)
        {
            State = ResultState.AuthorizError;
        }
        catch (DirectoryNotFoundException)
        {
            State = ResultState.PathNotFound;
        }
        catch (IOException)
        {
            State = ResultState.IOError;
        }
        finally
        {
            WriteResult();
        }
    }

注意添加七牛SDK项目的应用和引入命名空间。

到此展示图片列表就搞定了

源代码下载

源代码下载 

百度网盘提取密码：2tpy

发布者：IT柚子，转转请注明出处：https://ityouzi.com/archives/aspnet-ueditor-qiniu.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
IT柚子的头像IT柚子
0 0
上一篇 2019年4月2日 下午1:38
下一篇 2019年4月2日 下午1:40

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注