UEditor上传图片到七牛云储存(c#)

我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿

云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛

编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件

下面写一下c#版本的修改方法(java版本在下一篇

 

一、集成UEditor

1、在项目中加入UEditor

在UEditor的下载页,可以下载到最新的1.4.3.3 .Net版本(UTF-8)

把解压出的文件夹放进项目

2、添加Newtonsoft.Json.dll引用

项目 -> 引用 -> 添加引用 -> 浏览(最近),找到UEditor\net\Bin\Newtonsoft.Json.dll添加引用

3、将UEditor嵌入页面

新建一个页面,内容是:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UEditorPage.aspx.cs" Inherits="NetImgUpload.UEditorPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UEditor上传图片到七牛(.net)</title>
    <script src="/UEditor/ueditor.config.js" type="text/javascript"></script>
    <script src="/UEditor/ueditor.all.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/plain" id="editor" name="editContent" style="width:600px; height:300px;"></script>
        <script type="text/javascript">
            var ue = UE.getEditor('editor');
        </script>
    </form>
</body>
</html>

4、运行效果

最后的文件目录:

页面的运行效果:

 

二、集成七牛sdk

1、下载七牛sdk

在七牛sdk的下载页,找到c#(服务端)点击安装,下载最新的v6.1.5版本

把解压出的文件夹放在项目同一目录

(sdk是为了方便我们开发而写的一个工具包,七牛账户的申请、添加对象储存都非常简单,这里就不说了)

2、引入七牛sdk

解决方案 -> 添加 -> 现有项目,找到QiniuSDK\Qiniu\Qiniu.4.0.csproj添加现有项目

项目 -> 引用 -> 项目(解决方案),勾选Qiniu.4.0添加引用

3、修改Newtonsoft.Json.dll引用

七牛sdk里面默认引用了.net 2.0的Newtonsoft.Json.dll,和之前UEditor里引用的.net 4.0版不一样,需要改成一样的,不然之后图片上传会失败

删除七牛sdk项目引用里的Newtonsoft.Json.dll,然后添加引用UEditor里的Newtonsoft.Json.dll,步骤和上面一样

最后的文件目录:

 

三、上传图片到七牛

1、添加QiniuHelper.cs帮助类

这是为了接下来方便修改写的一个工具类,使用它可以省一些重复代码

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using Qiniu.IO;
using Qiniu.RS;

namespace NetImgUpload
{
    /// <summary>
    /// 七牛工具类
    /// </summary>
    public class QiniuHelper
    {
        /// <summary>
        /// 空间名
        /// </summary>
        private static readonly string Scope = ConfigurationManager.AppSettings["QiniuScope"];

        /// <summary>
        /// 域名
        /// </summary>
        private static readonly string Url = ConfigurationManager.AppSettings["QiniuUrl"];

        /// <summary>
        /// 插入数据并返回交互结果
        /// </summary>
        /// <param name="imageFile"></param>
        /// <returns></returns>
        public static PutRet GetResult(byte[] imageFile)
        {
            var target = new IOClient();
            var extra = new PutExtra
            {
                MimeType = "text/plain",
                Crc32 = 123,
                CheckCrc = CheckCrcType.CHECK,
                Params = new Dictionary<string, string>()
            };
            var put = new PutPolicy(Scope);
            return target.Put(put.Token(), Guid.NewGuid().ToString(), new MemoryStream(imageFile), extra);
        }

        /// <summary>
        /// 获得url地址
        /// </summary>
        /// <returns></returns>
        public static string GetUrl(string key)
        {
            return GetPolicy.MakeBaseUrl(Url, key);
        }

        /// <summary>
        /// 删除数据
        /// </summary>
        /// <param name="key"></param>
        public static void DeleteData(string key)
        {
            var client = new RSClient();
            client.Delete(new EntryPath(Scope, key));
        }

        /// <summary>
        /// 批量删除数据
        /// </summary>
        /// <param name="keys"></param>
        public static void DeleteDatas(string keys)
        {
            var client = new RSClient();
            var entryPaths = new List<EntryPath>();
            foreach (string key in keys.Split(','))
            {
                entryPaths.Add(new EntryPath(Scope, key.Replace("'", "")));
            }
            client.BatchDelete(entryPaths.ToArray());
        }
    }
}

 

2、修改UploadHandler.cs类

找到UEditor\net\App_Code\UploadHandler.cs类,找到以下代码:

if (!Directory.Exists(Path.GetDirectoryName(localPath)))
{
    Directory.CreateDirectory(Path.GetDirectoryName(localPath));
}
File.WriteAllBytes(localPath, uploadFileBytes);
Result.Url = savePath;
Result.State = UploadState.Success;

修改成:

#region 不再需要储存文件到服务器

//if (!Directory.Exists(Path.GetDirectoryName(localPath)))
//{
//    Directory.CreateDirectory(Path.GetDirectoryName(localPath));
//}
//File.WriteAllBytes(localPath, uploadFileBytes);
//Result.Url = savePath;
//Result.State = UploadState.Success;

#endregion

#region 上传文件到七牛

var ret = QiniuHelper.GetResult(uploadFileBytes);

if (ret.OK)
{
    Result.Url = QiniuHelper.GetUrl(ret.key);
    Result.State = UploadState.Success;
}

#endregion

这样原来图片上传到本地的方式就改成上传到七牛了

 

3、修改七牛sdk的Config.cs

找到QiniuSDK\Qiniu\Conf\Config.cs类,找到以下代码:

#region 帐户信息
/// <summary>
/// 七牛提供的公钥,用于识别用户
/// </summary>
public static string ACCESS_KEY = "<Please apply your access key>";
/// <summary>
/// 七牛提供的秘钥,不要在客户端初始化该变量
/// </summary>
public static string SECRET_KEY = "<Dont send your secret key to anyone>";
#endregion

修改成:

#region 帐户信息
/// <summary>
/// 七牛提供的公钥,用于识别用户
/// </summary>
public static string ACCESS_KEY = ConfigurationManager.AppSettings["QiniuAccessKey"];
/// <summary>
/// 七牛提供的秘钥,不要在客户端初始化该变量
/// </summary>
public static string SECRET_KEY = ConfigurationManager.AppSettings["QiniuSecretKey"];
#endregion

 

4、修改网站的web.config

在configuration节点的appSettings节点下增加:

<!--七牛的相关配置-->
<add key="QiniuScope" value="xxxx" />
<add key="QiniuUrl" value="xxxxxxxxx.bkt.clouddn.com" />
<add key="QiniuAccessKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<add key="QiniuSecretKey" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

QiniuScope是存储空间的名称

QiniuUrl是存储空间的域名(也可以用自己的正式域名)

QiniuAccessKey和QiniuSecretKey是用户的一对密钥,在个人面板 -> 个人中心 -> 密钥管理 界面中可以创建、查看

 

5、修改UEditor的配置

(1)、修改config.json

找到UEditor\net\config.json文件,修改imageUrlPrefix(图片访问路径前缀)为空(因为上传到七牛了,url是一个完整的路径,不需要前缀)

(2)、关闭自动本地保存

找到UEditor\ueditor.all.js文件,查找"'contentchange': function () {",在这个函数内增加代码:

'contentchange': function () {

    //关闭自动本地保存
    if (!me.getOpt('enableAutoSave')) {
        return;
    }

这样就不会经常跳出烦人的提示框了

 

6、图片上传运行效果

最后测试一下图片上传是否成功

单图片上传:

内容里src已经变成了七牛的地址了

再看多图片上传:

 

7、demo下载

最新的代码地址:https://github.com/ctxsdhy/cnblogs-example

 

四、其他扩展

这是我的博客里面使用的,设置所有图片尺寸和加入相册功能,其实就是在UEditor里修改几处js,然后增加一个加入相册服务

方法暂时不整理了,博客的代码在这里:https://github.com/ctxsdhy/xsblog

 

posted @ 2016-07-30 13:44  syxsdhy  阅读(1734)  评论(3编辑  收藏  举报