项目中需要实现在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引用方式安装、项目引入方式安装
解决方案中右击
再下图搜索框输入需要安装的SDK包(输入阿里云或aliyun.oss.sdk)、点击安装即可,只要选择安装到指定的项目中即可。一键导入很方便有木有
安装完成
一、下面开始改造Ueditor上传图片的服务(安装配置过程参照官网文档)
- Ueditor(App_Code目录): 上的文件是应用程序的源码。
- 成功发现UploadHandler.cs类,基于此类我们就可以完成上传的功能。
//上传到阿里云
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();
}
}
1、这里的外网Endpoint区域需要自行替换成你创建bucket里面分配的OSS区域,可在bucket概览中查看
查看Object内容,成功上传到OSS。