如何利用”七牛云”在ueditor实现图片的上传和浏览

愚公学编程 愚公学编程     2022-08-04     375

关键词:

在学习之前,我参考了朋友些的一篇关于这个功能实现的文章,非常不错。大家可以参考: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,
}
View Code

 

 

6. 在后台的UEditor上传图片

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

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

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

 

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

(注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白)作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下。。。看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了一部... 查看详情

ueditor上传图片到七牛云存储(formapi,java)

转:http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

ueditor+七牛,实现图片直连上传

...近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor。同时,我们的图片放在七牛云存储上。关于这两者间的集成,我写下一些个人的经验,与大家分享。 图片上传方案目前来说,Web端基于七牛等云存储的图片上... 查看详情

ueditor1.4.3php如何上传图片到图片服务器(七牛)

...务器了,而且没有改图片名字。https://github.com/widuu/qiniu_ueditor_1.4.3想知道该如何修改,或者能不能不用他给的上传类而用我自己写的上传类,因为我之前已经写好了一个上传到七牛的类了,自己在表单上传可以,但不知道咋弄给u... 查看详情

thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos

参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情

前端上传图片头像到七牛云格式变成text

...后台的对象存储功能,nodejs后台生成七牛云的token,前端利用elementUI/ice的upload组件,文件名和token作为参数请求到七牛云后台。配置已经完成,写接口用的是express,koa同理,主要做法是先接收前端的图片流转换成图片写入本地ima... 查看详情

php表单上传图片到七牛云存储并返回地址……求具体流程~有代码更好

...及上传之后的重定向。首先本篇文章实现的功能如下:1.利用表单上传功能,用户可以点击选择文件按钮,选择本地的一个文件,同时设定上传的图片的名称,点击上传按钮可以上传并存储到七牛云存储。2.在点击上传时会检测... 查看详情

如何将图片上传到七牛云平台?

参考技术A上一篇文章介绍了“如何将图片上传到Cloudinary云平台?”但是由于Cloudinary的服务器在国外,所以上传和读取图片的速度会很慢,不适合用作生产,因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给... 查看详情

java实现七牛云文件或图片上传下载(代码片段)

文章目录一、准备工作1.1.为什么选择七牛云?1.2.七牛云注册二、java操作七牛云对象存储下载2.1.pom.xml引入依赖2.2.上传下载具体代码三、具体业务例子(七牛云做图片服务器--SpringBoot)3.1.pom.xml(此处继承上面的依赖多引入一个)3.2.创... 查看详情

jsp使用七牛云api和webuploader上传多组图片(代码片段)

文章目录jsp使用七牛云API和webuploader上传多组图片介绍目录树遇到的问题上传组件的选择问题进度条多线程前端界面数据库关键代码UserPhotoDaoImplUploadServletJDBCServletlist.jspadd.jsppom.xml参考jsp使用七牛云API和webuploader上传多组图片介绍... 查看详情

canvas保存图片到七牛云(代码片段)

最近在做一个项目,需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情

七牛云:ckeditorjssdk结合c#实现多图片上传。

成功了,搞了2天。分享一下经验。首先是把官方的那个例子下载下来,然后照如下的方式修改。其中tempValue是一个全局变量。functionsavetoqiniu(){ varuploader=Qiniu.uploader({ runtimes:"html5,flash,html4", browse_button:"setfile", save_key:false, //uptoken:q... 查看详情

七牛云实现js上传

七牛云的官方API写的一塌糊涂。最主要的,还是版本兼容的问题。 一、引入文件引入了两个文件:1.jquery-1.10.2.min.js2.plupload.full.min.js3.qiniu.js版本太重要了。我提供了下载地址。二.html代码<pclass="tip1">本demo实现的图片预览... 查看详情

使用七牛接口实现图片和文件一键上传(代码片段)

本文主要介绍使用七牛提供的接口把七牛云作为图床,用Python实现图片上传和文件上传的脚本实现,可以支持按文件夹批量上传。搭建过网站的同学,一定都涉及到图片上传和文件上传的问题,最近为了弄图片资源接触了一下云... 查看详情

ueditor之实现配置简单的图片上传示例(转)

...wenyi1010/article/details/51637427#comments 1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传和利用自己的接口:运行tomcat上,在google浏览器运行(Tes... 查看详情

在ipic中添加七牛云

...进入图床页,选择添加七牛。以下分别介绍各项的意义及如何配置:完成输入后,可以点击****验证****按钮。如果输入没有问题,则右侧会出现****通过****链接,点击后就可以看到测试时上传至七牛的图片。最后,点击****应用****... 查看详情

七牛云上传图片报400错误的一些小坑

...问题,上传图片还是报code400,最后发现是因为后端申请七牛云的时候填写的服务器是华南区而SDK里默认是华东区,导致上传失败。步骤一:先搜索七牛SDK里的zone0(图一)步骤二:查看后台申请的区域(图三)步骤三:把(图二... 查看详情

上传base64图片到七牛云前端遇到的坑

介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒。)七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code  我们前端理所当然就... 查看详情