如何利用”七牛云”在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, 0, 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, 3600);

            //调用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 = 0,
    SizeLimitExceed = -1,
    TypeNotAllow = -2,
    FileAccessError = -3,
    NetworkError = -4,
    Unknown = 1,
}

6. 在后台的UEditor上传图片

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

8.七牛云的C# SDK 使用指南和下载地址

http://developer.qiniu.com/code/v6/sdk/csharp.html

时间: 2024-10-10 15:13:28

如何利用”七牛云”在UEditor实现图片的上传和浏览的相关文章

初试“七牛云”--零基础运用七牛云配合UEditor实现图片的上传和浏览(.NET篇)

(注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白) 作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下... 看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了一部分,但是不系统,理解的不连贯,作为一个凡是要弄个特别明白的死脑筋,于是开始从头看是研究文档....(以下都是来自http://developer.qiniu.com/article/index.html#quickstart,经过个人精简,如有不明,详情请参阅文档) 先弄明白原理,才能更好的看懂

七牛云存储Python SDK使用教程 - 上传策略详解

文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k 浏览 本教程旨在介绍如何使用七牛的Python SDK来快速地进行文件上传,下载,处理,管理等工作. 前言 我们在上面的两节中了解到,客户端上传文件时,需要从业务服务器申请一个上传凭证(Upload Token),而这个上传凭证是业务服务器根据上传策略(PutPolicy)来生成的,而这个生成过程中

Asp.Net 自定义控件实现图片的上传,浏览,删除功能

4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的标准.后来公司来活,然后就没有然后了,然而做事总不能半途而废吧~时隔一个多月,趁着这个周末,我再次拾起了这个项目,而首要工作就是攻破这个图片上传控件. 下面说说我的标准是什么子的吧~ 1.最多可以上传三张图片,超过三张有提示. 2.点击图片小图,有图片放大功能,再次点击,图片恢复原来尺寸. 3.在图

Asp.Net 自定义控件实现图片的上传,浏览,Delete功能

4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的标准.后来公司来活,然后就没有然后了,然而做事总不能半途而废吧~时隔一个多月,趁着这个周末,我再次拾起了这个项目,而首要工作就是攻破这个图片上传控件. 下面说说我的标准是什么子的吧~ 1.最多可以上传三张图片,超过三张有提示. 2.点击图片小图,有图片放大功能,再次点击,图片恢复原来尺寸. 3.在图

将UEditor的图片批量上传抠出来单独使用

在Web项目中,经常有这样一个需求,就是对图片的批量上传,利用form表单的file可以实现图片的上传,但是用户体验不好,而且不支持ajax提交,网上也有很多图片上传插件,有基于javascript的,也有基于flash的,但是给我的感觉,要么用户体验不好,要么收费的,那么能不能有一个比较好的方案呢?那就是Ueditor! UEditor是百度出品的一款富文本编辑器,里面也集成了一个基于Flash的图片上传插件,由于Ueditor是开源的,所以源代码很容易得到,经过我的一番研究,找到了它的图片上

SSM配置Ueditor实现图片的上传&lt;一&gt;

最近想学点新的东西,于是琢磨着用SSM整合Ueditor来实现图片的上传!至于为什么选Ueditor,道理你懂得啦!百度开发的而且开源,能自定义自己想要的内容,版本更新什么的也比较勤快!接下来我准备记录下探索的过程! 1.下载 点击跳转到Ueditor下载界面 你可以到上面的地址下载Ueditor插件,选择UTF-8编码的Jsp版本. 2.构建工程 新建一个Maven工程,首先把ssm框架的基本的东西搭建好,如果你不清楚ssm基本框架,我博客里面有详细的搭建过程可以参考!在这我就直接上图了! 3

微擎ueditor编辑器图片批量上传顺序混乱的解决方法

上周六有客户反映刚上线的商城管理系统在商品详情页批量上传图片的时候出现图片显示顺序与上传顺序不一致的问题,经排查,发现是编辑器在上传时是按上传完成的顺序插入图片的,即先传完先显示,在网上查了一下,发现很多人都有遇到这个问题,初步认为是ueditor编辑器的bug,于是按照网上的方法去解决,但都没有解决问题,调试查找之后发现网上的解决方法根本不适合微擎的多图上传,因为涉及的文件都没有被调用....无奈只好自己查找,在和同事查找了将近一天之后终于找到了两个相关文件,然后又花了些功夫,最后总算是弄好了

Laravel项目中使用markdown编辑器及图片粘贴上传七牛云

本文为转载,原文:http://www.chairis.cn/blog/article/15 Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.本次我们选用的编辑器是: Editor.md,官网中也有很详细的介绍.从官网中下载安装下载的内容中,也有很多demo可以借鉴.在下载的包中,去除一些多余的内容,只保留我们需要的内容,然后加到项目的public目录下,如下图红色框内的内容: 项目中使用 在项目中使用edit

Ueditor结合七牛云及百度云存储(JAVA版,ueditor-1.4.3)实现图片文件上传

[前言] 之前研究了ueditor直接上传图片文件到七牛云以及百度云存储,见下面两篇文章: http://uikoo9.com/blog/detail/ueditor-for-bcs http://uikoo9.com/blog/detail/ueditor-for-qiniu 另外还有一篇ueditor-1.4.3-jsp的使用教程: http://uikoo9.com/blog/detail/how-to-use-ueditor 今天实现了ueditor可配置选择上传到七牛还是百度还是本地,