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

近来做博客要用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)

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

配置参数解释:

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

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

4、扩展七牛SKD

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

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

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

正式对接

1、上传图片

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

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

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

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

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

2、显示在线图片列表

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

20150617094023798_7256.jpg

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

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

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

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

源代码下载

源代码下载 

百度网盘提取密码:2tpy

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

发表评论

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