C# .net Ueditor实现图片上传到阿里云OSS 对象存储

时间：2024-02-22 10:32:21

项目中需要实现在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()方法里面的这段代码是实现将图片上传保存到网站目录下
先将代码注释掉
 
然后自己写上传到阿里云的代码
 
 
 1 //上传到阿里云  
 2 using (Stream fileStream = new MemoryStream(uploadFileBytes))//转成Stream流  
 3 {  
 4     var fs = Request.Files[UploadConfig.UploadFieldName];  
 5     string md5 = OssUtils.ComputeContentMd5(fileStream, fs.ContentLength);  
 6     string today = DateTime.Now.ToString("yyyyMMdd");  
 7     string FileName = uploadFileName + today + Path.GetExtension(uploadFileName);//文件名=文件名+当前上传时间  
 8     string FilePath = "Upload/" + today + "/" + FileName;//云文件保存路径  
 9     try  
10     {  
11         //初始化阿里云配置--外网Endpoint、访问ID、访问password  
12         OssClient aliyun = new OssClient("https://oss-cn-【外网Endpoint区域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret");  
13   
14         //将文件md5值赋值给meat头信息，服务器验证文件MD5  
15         var objectMeta = new ObjectMetadata  
16         {  
17             ContentMd5 = md5,  
18         };  
19         //文件上传--空间名、文件保存路径、文件流、meta头信息(文件md5) //返回meta头信息(文件md5)  
20         aliyun.PutObject("bucketName", FilePath, fileStream, objectMeta);  
21   
22         //返回给UEditor的插入编辑器的图片的src  
23         Result.Url = "http://bucketName.oss-cn-【外网Endpoint区域】.aliyuncs.com/" + FilePath;  
24         Result.State = UploadState.Success;  
25     }  
26     catch (Exception e)  
27     {  
28         Result.State = UploadState.FileAccessError;  
29         Result.ErrorMessage = e.Message;  
30     }  
31     finally  
32     {  
33         WriteResult();  
34     }  
35 }

 

上传功能实现（能上传但还不能在编辑器中预览，还需要改造下Ueditor配置文件，见第二部分~ ~ ）
 
ps：这里因为PutObject方法第三个参数需要Stream，而Ueditor源码是读取文件的byte[]，小白的看不太懂源码就不太敢改，而是将获取的文件字节转换成了Stream流来上传使用。
 
 
 
另外需要一提的是
 
OssClient aliyun = new OssClient("https://oss-cn-【外网Endpoint区域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret");

 

 
1、这里的外网Endpoint区域需要自行替换成你创建bucket里面分配的OSS区域，可在bucket概览中查看
 
2、Access Key ID和Access Key Secret需要我们去OSS创建（根据ID和Secret分配不同的权限操作OSS）
 
 
 
——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
 
 
 
二、接下来还需要更改Ueditor的上传图片的配置信息
 
 
去除Ueditor自动加上的图片访问路径前缀，这样我们才能在上传成功之后预览到图片。

 

 

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

 

 

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

相关文章