如何利用”七牛云”在UEditor实现图片的上传和浏览
在学习之前,我参考了朋友些的一篇关于这个功能实现的文章,非常不错。大家可以参考:http://www.cnblogs.com/John-Marnoon/p/5818528.html#3501846
里面都写了具体的实现,我也是参照朋友的文章来操作的。现在我重新整理一下实现的步骤:
1 . 注册一个七牛云用户
2. 在七牛云网站中创建一个空间来存储图片,存储区域选择 华东或是 华北,请先记得上传到华东1区的域名为up.qiniu.com、up-z0.qiniu.com和upload.qiniu.com;上传到华北1区的域名为up-z1.qiniu.com和upload-z1.qiniu.com ,后面写代码需要用到。

3. 查看七牛云的密钥管理

4. 查看空间的域名

5. 修改UEditor中的 UploadHandler类的代码。实现代码如下
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using Qiniu.Auth;
using Qiniu.IO;
using Qiniu.IO.Resumable;
using Qiniu.RS; /// <summary>
/// UploadHandler 的摘要说明
/// </summary>
public class UploadHandler : Handler
{ public UploadConfig UploadConfig { get; private set; }
public UploadResult Result { get; private set; } public UploadHandler(HttpContext context, UploadConfig config)
: base(context)
{
this.UploadConfig = config;
this.Result = new UploadResult() { State = UploadState.Unknown };
} public override void Process()
{
byte[] uploadFileBytes = null;
string uploadFileName = null; if (UploadConfig.Base64)
{
uploadFileName = UploadConfig.Base64Filename;
uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
}
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;
} uploadFileBytes = new byte[file.ContentLength];
try
{
file.InputStream.Read(uploadFileBytes, , file.ContentLength);
}
catch (Exception)
{
Result.State = UploadState.NetworkError;
WriteResult();
}
} Result.OriginFileName = uploadFileName;
DateTime today = DateTime.Today;
string qiNiuFileName = "upload/" + today.Year + "/" + today.Month + "/" + today.Day + "/" + RuPengCommons.CommonHelper.CalcMD5(uploadFileBytes) + Path.GetExtension(uploadFileName); // var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);
// var localPath = Server.MapPath(savePath);
try
{
// if (!Directory.Exists(Path.GetDirectoryName(localPath)))
// {
// Directory.CreateDirectory(Path.GetDirectoryName(localPath));
// }
// File.WriteAllBytes(localPath, uploadFileBytes);
// Result.Url = savePath;
// Result.State = UploadState.Success;
Qiniu.Conf.Config.ACCESS_KEY = "MUahZ72rD1AMFaLqKBk0I382FSVVWib8ArK-7oKP";
Qiniu.Conf.Config.SECRET_KEY = "mi3P4qzsfXiHJ7Rr9wwCBH7smRHQabpRnEFeDIuw";
//上传域名为:上传到华东1区的域名为up.qiniu.com、up-z0.qiniu.com和upload.qiniu.com;上传到华北1区的域名为up-z1.qiniu.com和upload-z1.qiniu.com
Qiniu.Conf.Config.UP_HOST = "http://up-z1.qiniu.com";
IOClient target = new IOClient();
PutExtra extra = new PutExtra();
//设置上传的空间
String bucket = "tupian";
//设置上传的文件的key值
String key = qiNiuFileName; //普通上传,只需要设置上传的空间名就可以了,第二个参数可以设定token过期时间
PutPolicy put = new PutPolicy(bucket, ); //调用Token()方法生成上传的Token
string upToken = put.Token();
//上传文件的路径
MemoryStream ms = new MemoryStream(uploadFileBytes); //调用PutFile()方法上传
// PutRet ret = target.PutFile(upToken, key, filePath, extra);
PutRet ret = target.Put(upToken, key,ms, extra); Result.Url = "http://od6b842wn.bkt.clouddn.com/" + qiNiuFileName; Result.State = UploadState.Success;
}
catch (Exception e)
{
Result.State = UploadState.FileAccessError;
Result.ErrorMessage = e.Message;
}
finally
{
WriteResult();
}
} private void WriteResult()
{
this.WriteJson(new
{
state = GetStateMessage(Result.State),
url = Result.Url,
title = Result.OriginFileName,
original = Result.OriginFileName,
error = Result.ErrorMessage
});
} private string GetStateMessage(UploadState state)
{
switch (state)
{
case UploadState.Success:
return "SUCCESS";
case UploadState.FileAccessError:
return "文件访问出错,请检查写入权限";
case UploadState.SizeLimitExceed:
return "文件大小超出服务器限制";
case UploadState.TypeNotAllow:
return "不允许的文件格式";
case UploadState.NetworkError:
return "网络错误";
}
return "未知错误";
} private bool CheckFileType(string filename)
{
var fileExtension = Path.GetExtension(filename).ToLower();
return UploadConfig.AllowExtensions.Select(x => x.ToLower()).Contains(fileExtension);
} private bool CheckFileSize(int size)
{
return size < UploadConfig.SizeLimit;
}
} public class UploadConfig
{
/// <summary>
/// 文件命名规则
/// </summary>
public string PathFormat { get; set; } /// <summary>
/// 上传表单域名称
/// </summary>
public string UploadFieldName { get; set; } /// <summary>
/// 上传大小限制
/// </summary>
public int SizeLimit { get; set; } /// <summary>
/// 上传允许的文件格式
/// </summary>
public string[] AllowExtensions { get; set; } /// <summary>
/// 文件是否以 Base64 的形式上传
/// </summary>
public bool Base64 { get; set; } /// <summary>
/// Base64 字符串所表示的文件名
/// </summary>
public string Base64Filename { get; set; }
} public class UploadResult
{
public UploadState State { get; set; }
public string Url { get; set; }
public string OriginFileName { get; set; } public string ErrorMessage { get; set; }
} public enum UploadState
{
Success = ,
SizeLimitExceed = -,
TypeNotAllow = -,
FileAccessError = -,
NetworkError = -,
Unknown = ,
}

6. 在后台的UEditor上传图片

7. 在后台保存成功后,在前台预览

8.七牛云的C# SDK 使用指南和下载地址
http://developer.qiniu.com/code/v6/sdk/csharp.html

如何利用”七牛云”在UEditor实现图片的上传和浏览的更多相关文章
- 初试“七牛云”--零基础运用七牛云配合UEditor实现图片的上传和浏览(.NET篇)
(注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白) 作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下... 看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了 ...
- 七牛云存储Python SDK使用教程 - 上传策略详解
文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k ...
- 七牛云存储 qiniu 域名 回收 文件上传 备份 下载 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 使用Python3.7+Tornado5.1配合七牛云存储api来异步切分上传文件
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_123 之前写了几篇关于FastDfs分布式存储的文章:python3.7.3操作FastDfs来进行文件操作,其实市面上关于云存储 ...
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- Asp.Net 自定义控件实现图片的上传,浏览,删除功能
4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的 ...
- PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例
网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...
- ueditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- ueditor+复制word图片粘贴上传
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
随机推荐
- Apex单元测试
单元测试类 Salesforce中为Apex语言提供了完整的单元测试流程,包括单元测试类.测试的运行和结果分析等. 单元测试类是一种特殊的Apex类,基本语法和普通的Apex类一样. 单元测试类的结构 ...
- Linux 学习笔记之超详细基础linux命令 Part 3
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 2----------------- ...
- loadrunner 技巧-模拟Run Logic中的随机Action运行
技巧-模拟Run Logic中的随机Action运行 by:授客 QQ:1033553122 可以这样做,Run-time Settings,删除Action7,然后在其它Action比如Acti ...
- LaTeX:图形的填充(生成阴影图形)
将内网和外网看到的综合整理. 韦恩图Venn \documentclass{standalone} \usepackage{tikz} %导出为图片需要安装imagemagick %https://t ...
- Java并发编程(十二)Callable、Future和FutureTask
一.Callable与Runnable 先说一下java.lang.Runnable吧,它是一个接口,在它里面只声明了一个run()方法: public interface Runnable { pu ...
- SQL alwayson 辅助接点查询统计信息“丢失”导致查询失败
ALWAYSON 出现以下情况已经2次了,记录下: DBCC 执行完毕.如果 DBCC 输出了错误信息,请与系统管理员联系. 消息 2767,级别 16,状态 1,过程 sp_table_statis ...
- 转:npm安装教程
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
- 第五章 绘图基础(DEVCAPS1)
获取设备环境的信息 //DEVCAPS1.C--Device Capabilities Display Program No.1 (c) Charles Petzold, 1998 #include ...
- python遍历本地文件系统 按文件大小排序
在这个例子中,主要会用到python内置的和OS模块的几个函数: os.walk() : 该方法用来遍历指定的文件目录,返回一个三元tuple(dirpath, dirnames, filenames ...
- centos7下rsync+crontab定期同步备份
最近需求想定期备份内部重要的服务器数据到存储里面,顺便做个笔记 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 这次整一个Linux下的脚本sh,执行定期自动备 ...