项目中需要实现在Ueditor编辑器中将图片上传到云储存中

现在云计算产品服务已经很普遍,市场产品也有很多选择,感兴趣的同学可以去搜索下云存储,这里我选择了阿里云的对象存储服务,他们叫做阿里云 OSS(Object Storage Service),实现之前我简单的说下几个概念,加深自己的理解

1.1、什么是云存储

云存储是在云计算(cloud computing)概念上延伸和发展出来的一个新的概念,是一种新兴的网络存储技术,是指通过集群应用、网络技术或分布式文件系统等功能,将网络中大量各种不同类型的存储设备通过应用软件集合起来协同工作,共同对外提供数据存储和业务访问功能的一个系统。当云计算系统运算和处理的核心是大量数据的存储和管理时,云计算系统中就需要配置大量的存储设备,那么云计算系统就转变成为一个云存储系统,所以云存储是一个以数据存储和管理为核心的云计算系统。简单来说,云存储就是将储存资源放到云上供人存取的一种新兴方案。使用者可以在任何时间、任何地方,透过任何可连网的装置连接到云上方便地存取数据。——资料来自百度百科(云存储

简单的来说,现在大型网站开发大都采用这样的架构方式(分布式文件系统),图片、文件、资料上传到云存储,提供云存储服务的公司有专业的团队来帮你维护你的资源、安全可靠、价格较低。

1.2、对象存储有那些具体的优点

一张图让你快速了解对象存储——图片截取自阿里云OSS首页

1.3、为什么大型网站选择将图片等放入单独的域名(云存储的使用)

1.3.1、降低主站服务器的压力,分流。

1.3.2、可以降低cookie的流量占用。

1.3.3、CDN(将源站内容分发至全国所有的节点,缩短用户查看对象的延迟,提高用户访问网站的响应速度与网站的可用性,解决网络带宽小、用户访问量大、网点分布不均等问题)。

1.3.4、安全性高(各个服务公司都有对数据进行备份和安全机制处理)

1.3.4、云存储价格较低,随用随升,按量定制。

可以看出好处还是很多的,话不多说,进入正题,

1.4、开通服务在使用之前,我们先弄清楚 OSS 的几个基本概念。

1.4.1、我们上传的所有数据文件在OOS上以对象(object)的形式上传到存储空间(bucket)中。 所以我们至少创建一个存储空间,然后向每个存储空间中添加一个或多个文件。

1.4.2、已上传文件以(bucket+endpoint为地址)进行文件的分享和下载。通过修改存储空间或文件的属性或元信息,还可以设置相应的访问权限。

1.4.3、阿里云OSS在管理控制台管理和执行基本和高级 OSS 任务,您还可以通过阿里云开发工具包或通过直接在应用程序中进行 REST API 调用执行基本和高级 OSS 任务。(这里我在项目中使用API调用服务)

接下来我们下载 官网提供 的.NET SDK

安装的方式有很多种

NuGet安装、GitHub安装、DLL引用方式安装、项目引入方式安装

因为还从来没有尝试过NuGet,所以好奇心下我决定采用这种姿势来安装(后来我发现它是个好东西啊,我决定以后多宠幸它)
 
简单的说说NuGet:
 
NuGet 是一个Visual Studio的扩展。在使用Visual Studio开发基于.NET Framework的应用时,NuGet能够令你在项目中添加、移除和更新引用的工作变得更加快捷方便。(我们在安装Vs的时候一般都会附加,如果没有就需要额外安装)
 
 
这就是说: 我们往往在开发项目里,会使用一些第三方的dll, 如:Newtonsoft.Json.dll (它为我们提供了进行序列化和反序列化解决方案)
但是,我们往往也面临随着项目升级,对这些引入的第三方插件进行升级的可能和必要。
 
现在,NuGet 将这个过程系统化(代替你去寻找它的最新版本,下载,解压,然后替换等操作),令你可以更加方便的查找你要的第三方的dll, 同时,还可以为你提供自动或者手动更新的方式来升级你的插件。整个过程帮我们省事不少~
 
 
 
 
安装过程:

解决方案中右击

再下图搜索框输入需要安装的SDK包(输入阿里云或aliyun.oss.sdk)、点击安装即可,只要选择安装到指定的项目中即可。一键导入很方便有木有

安装完成

——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————

一、下面开始改造Ueditor上传图片的服务(安装配置过程参照官网文档)

  • Ueditor(App_Code目录): 上的文件是应用程序的源码。
  • 成功发现UploadHandler.cs类,基于此类我们就可以完成上传的功能。
 
观察UploadHandler中Process()方法里面的这段代码是实现将图片上传保存到网站目录下
先将代码注释掉
 
然后自己写上传到阿里云的代码
 
 
 //上传到阿里云
using (Stream fileStream = new MemoryStream(uploadFileBytes))//转成Stream流
{
var fs = Request.Files[UploadConfig.UploadFieldName];
string md5 = OssUtils.ComputeContentMd5(fileStream, fs.ContentLength);
string today = DateTime.Now.ToString("yyyyMMdd");
string FileName = uploadFileName + today + Path.GetExtension(uploadFileName);//文件名=文件名+当前上传时间
string FilePath = "Upload/" + today + "/" + FileName;//云文件保存路径
try
{
//初始化阿里云配置--外网Endpoint、访问ID、访问password
OssClient aliyun = new OssClient("https://oss-cn-【外网Endpoint区域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret"); //将文件md5值赋值给meat头信息,服务器验证文件MD5
var objectMeta = new ObjectMetadata
{
ContentMd5 = md5,
};
//文件上传--空间名、文件保存路径、文件流、meta头信息(文件md5) //返回meta头信息(文件md5)
aliyun.PutObject("bucketName", FilePath, fileStream, objectMeta); //返回给UEditor的插入编辑器的图片的src
Result.Url = "http://bucketName.oss-cn-【外网Endpoint区域】.aliyuncs.com/" + FilePath;
Result.State = UploadState.Success;
}
catch (Exception e)
{
Result.State = UploadState.FileAccessError;
Result.ErrorMessage = e.Message;
}
finally
{
WriteResult();
}
}
上传功能实现(能上传但还不能在编辑器中预览,还需要改造下Ueditor配置文件,见第二部分~ ~ )
 
ps:这里因为PutObject方法第三个参数需要Stream,而Ueditor源码是读取文件的byte[],小白的看不太懂源码就不太敢改,而是将获取的文件字节转换成了Stream流来上传使用。
 
 
 
另外需要一提的是
 
 

1、这里的外网Endpoint区域需要自行替换成你创建bucket里面分配的OSS区域,可在bucket概览中查看

 
2、Access Key ID和Access Key Secret需要我们去OSS创建(根据ID和Secret分配不同的权限操作OSS)
 
 
 
——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
 
 
 
二、接下来还需要更改Ueditor的上传图片的配置信息

 
 
去除Ueditor自动加上的图片访问路径前缀,这样我们才能在上传成功之后预览到图片。

查看Object内容,成功上传到OSS。

——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
 
 
 
总结:在完成功能的路上也有走偏过掉到坑里,但一名好的程序员要懂得不懂就查,在运用的过程中要明白原理,知识不能停在表面的理解上,这样才能举一反三,活学活用,同时我发现,在调用功能包的时候,首先需要多翻看官网提供的API文档和功能介绍,理清它们之前的关系,不然对面各种类库文件眼花缭乱,只会让自己无从下手。
 
至此,成功完成Ueditor上传图片到阿里云OSS功能。小白还需要进步,欢迎大家指点。
 
 
 
 
 

C# .net Ueditor实现图片上传到阿里云OSS 对象存储的更多相关文章

  1. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

  2. egg-multipart + el-upload 实现带参图片上传至阿里云OSS

    egg-multipart有两种模式:file和stream el-upload参数传递有两种方式:利用自带参数data和手动添加参数 egg-multipart介绍 一.file 模式下的带参传递 ...

  3. SpringBoot整合阿里云OSS对象存储实现文件上传

    1. 准备工作: 一.首先登录阿里云OSS对象存储控制台创建一个Bucket作为你的存储空间. 二.创建Access Keyan按要求创建进行,这里的方法步骤我就不展现出来了,你们可以自行查询阿里云文 ...

  4. PHP 上传文件至阿里云OSS对象存储

    简述 1.阿里云开通对象存储服务 OSS 并创建Bucket 2.下载PHP SDK至框架扩展目录,点我下载 3.码上code 阿里云操作 开通对象存储服务 OSS 创建 Bucket 配置Acces ...

  5. Windows环境下用C#编程将文件上传至阿里云OSS笔记

    Windows环境下用C#编程将文件上传至阿里云OSS笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/detai ...

  6. Java下载https文件上传到阿里云oss服务器

    Java下载https文件上传到阿里云oss服务器 今天做了一个从Https链接中下载音频并且上传到OSS服务器,记录一下希望大家也少走弯路. 一共两个类: 1 .实现自己的证书信任管理器类 /** ...

  7. Linux本地数据上传到阿里云OSS

    这篇文章主要是介绍如何将服务器本地的数据上传到阿里云OSS的指定bucket中,最重要的参考文档是数据迁移单机部署.我第一次上传数据到OSS上时,步骤要比前面的链接中介绍的要麻烦,ossimport工 ...

  8. 备份MySQL数据库并上传到阿里云OSS存储

    1. 环境配置 要将本地文件上传到阿里云oss中, 必须使用阿里云提供的工具 ossutil, 有32位,也有64位的, Linux和Windows都有.具体可以到阿里云官网下载 官网及文档: htt ...

  9. 前端(react)上传到阿里云OSS存储 实例

    需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本 ...

随机推荐

  1. Creating a Linux Daemon (service) in Delphi

    With the introduction of the Linux target for Delphi, a wide range of possibilities are opened up to ...

  2. foruok安晓辉的《程序员,你好哇》,都很不错

    http://blog.csdn.net/foruok 买书: http://item.jd.com/11904166.html

  3. jQuery中的Ajax应用<思维导图>

    传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...

  4. Qemu搭建ARM vexpress开发环境(二)----通过u-boot启动Linux内核

    Qemu搭建ARM vexpress开发环境(二)----通过u-boot启动Linux内核 标签(空格分隔): Qemu ARM Linux 在上文<Qemu搭建ARM vexpress开发环 ...

  5. python 参考知识点

    本笔记仅作为有编程基础的童鞋在学习python时的参考资料,不适合零基础小白,并假设在你的电脑上已经正确安装了python环境,windows下需要配置环境变量,可以在终端窗口中执行以下命令 set ...

  6. 你必须了解的java内存管理机制(三)-垃圾标记

    本文在个人技术博客不同步发布,详情可用力戳 亦可扫描屏幕右侧二维码关注个人公众号,公众号内有个人联系方式,等你来撩... 相关链接(注:文章讲解JVM以Hotspot虚拟机为例,jdk版本为1.8) ...

  7. ZooKeeper学习之路(二)—— Zookeeper单机环境和集群环境搭建

    一.单机环境搭建 1.1 下载 下载对应版本Zookeeper,这里我下载的版本3.4.14.官方下载地址:https://archive.apache.org/dist/zookeeper/ # w ...

  8. 【JDK8】HashMap集合 源码阅读

    JDK8的HashMap数据结构上复杂了很多,因此读取效率得以大大提升,关于源码中红黑树的增删改查,博主没有细读,会在下一篇博文中使用Java实现红黑树的增删改查. 下面是类的结构图: 代码(摘抄自J ...

  9. c# 自己实现可迭代的容器

    在c#中我们经常使用到foreach语句来遍历容器,如数组,List,为什么使用foreach语句能够遍历一个这些容器呢,首先的一个前提是这些容器都实现了IEnumerable接口,通过IEnumer ...

  10. 大白话5分钟带你走进人工智能-第31节集成学习之最通俗理解GBDT原理和过程

    目录 1.前述 2.向量空间的梯度下降: 3.函数空间的梯度下降: 4.梯度下降的流程: 5.在向量空间的梯度下降和在函数空间的梯度下降有什么区别呢? 6.我们看下GBDT的流程图解: 7.我们看一个 ...