c blob 转 文件 服务器,使用 Azure Blob Stoage 实现一个静态文件服务器

什么是Azure Blob Stoage

Azure Blob Stoage 是微软Azure的对象存储服务。国内的云一般叫OSS,是一种用来存储非结构化数据的服务,比如音频,视频,图片,文本等等。用户可以通过http在全球任意地方访问这些资源。这些资源可以公开访问,也可以私有访问。看到这些描述立马就想到这这个服务可以用来做静态文件服务。

20200727091554501ycb8r01cgbbowg2_3.png

如果你有免费账户那么可以使用5G的免费额度,用来存一些图片跟JavaScript等小文件也足够了。

20200727091554501ycb8r01cgbbowg2_7.png

Azure Blob Stoage的存储结构。

创建存储账户

20200727091554501ycb8r01cgbbowg2_15.png

创建账户跟其他服务类似,取个实例的名称,选区域,还是那个套路哪个区域离你近就选哪个。

20200727091554501ycb8r01cgbbowg2_4.png

设置网络,默认设置即可。

20200727091554501ycb8r01cgbbowg2_13.png

高级设置,把“需要安全传输”禁用,为了测试方便咱不走https。

20200727091554501ycb8r01cgbbowg2_12.png

点击“创建”就开始部署实例,等待一会就可以完成了。

20200727091554501ycb8r01cgbbowg2_10.png

20200727091554501ycb8r01cgbbowg2_5.png

回到资源主界面开始新建容器,取个名字“static”,公共访问级别选择“Blob仅匿名访问blob”。

20200727091554501ycb8r01cgbbowg2_16.png

点击新建的容器,可以查看容器里的资源文件,可以上传删除文件。

20200727091554501ycb8r01cgbbowg2_17.png

自定义域名

到这我们的文件可以上传,可以访问,已经做为静态文件服务器使用了。但是这个域名不太友好,让我们来给它换个自己的域名访问。

20200727091554501ycb8r01cgbbowg2_0.png

选择左边菜单“自定义域”。界面上提示有两种方式可以设置自定义域名,我们使用CNAME来实现以下。

20200727091554501ycb8r01cgbbowg2_8.png

这里使用dnspod来管理域名。

添加一条记录:

主机记录:files

记录类型:cname

记录值:azblob123.blob.core.windows.net

这有配置之后,访问我自己的域名files.xbaby.xyz其实指向的是azblob123.blob.core.windows.net

20200727091554501ycb8r01cgbbowg2_6.png

我们使用新域名访问下 http://files.xbaby.xyz/static/1.jpg 浏览器里出现了对应的图片,表示我们的自定义域名起作用了。

使用SDK上传文件

显然每次上传文件都要登录到Azure的管理平台太麻烦了,我们可以使用Azure Blob提供的.net sdk来制作一个小工具来方便上传文件。

新建一个winform项目

新建一个winform项目,一个框放一个按钮用来选择文件,选择后进行上传。

20200727091554501ycb8r01cgbbowg2_9.png

从nuget上安装AzureBlobStorage的sdk

Install-Package Azure.Storage.Blobs -Version 12.4.4

使用sdk上传文件需要一个连接串

20200727091554501ycb8r01cgbbowg2_1.png

实现上传代码:

private void btnSelectfiles_Click(object sender, EventArgs e)

{

if (openFileDialog1.ShowDialog() == DialogResult.OK)

{

var path = openFileDialog1.FileName;

var fileName = path.Split("\\").Last();

string connectionString = "DefaultEndpointsProtocol=https;AccountName=azblob123;AccountKey=GLtYbcXjy+KCOLUgIbdRoEPeWA+esNF/DWDNR7jABJuJrh46SuXfc7EOVS8yJXGXpZej3h/QFR9zzFrIAtuqrw==;EndpointSuffix=core.windows.net";

var container = new BlobContainerClient(connectionString, "static");

using (var file = File.OpenRead(path))

{

container.UploadBlob(fileName, file);

MessageBox.Show($"{fileName}上传成功!");

}

}

}

使用工具选择一张图片稍等一会图片就会上传上去拉。

20200727091554501ycb8r01cgbbowg2_11.png

总结

使用Azure Blob Storage可以方便的上传跟管理各种图片、文本、音视频等文件。上传的每个文件都有一个唯一的url对应,可以方便的通过http在全球访问内进行访问。使用这些特性我们可以轻松的把它当做静态文件服务器来用。我们还可以通过定义域名跟自己的域名结合起来使用,获得更加友好的使用体验。Azure Blob Storage还提供了各种语言的sdk方便使用代码来管理数据。

关注我的公众号一起玩转技术

20200727091554501ycb8r01cgbbowg2_2.jpg

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js 中将 Blob 文件存储到服务器上可以通过以下步骤实现: 1. 将 Blob 文件换为 FormData 对象,以便可以通过 POST 请求将其发送到服务器上。可以使用 JavaScript 的 FormData API 来实现,例如: ``` var formData = new FormData(); formData.append('file', blob, 'filename'); ``` 其中,'file' 是表单字段名,blob 是要发送的 Blob 对象,'filename' 是要设置的文件名。 2. 使用 JavaScript 的 fetch 函数或 axios 库来发送 POST 请求,将 FormData 对象发送到服务器上,例如: ``` fetch('/upload', { method: 'POST', body: formData }).then(response => { console.log('File uploaded successfully'); }).catch(error => { console.error('Error uploading file:', error); }); ``` 其中,'/upload' 是服务器上用于接收文件的 API 接口地址。 3. 在服务器端,根据接口地址编写相应的处理逻辑,将接收到的文件保存到服务器上的指定位置,例如: ``` const express = require('express'); const multer = require('multer'); const app = express(); const storage = multer.diskStorage({ destination: (req, file, callback) => { callback(null, 'uploads/'); // 保存文件的目录 }, filename: (req, file, callback) => { callback(null, file.originalname); } }); const upload = multer({ storage: storage }); app.post('/upload', upload.single('file'), (req, res) => { res.send('File uploaded successfully'); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在上面的代码中,使用了 Express 和 multer 中间件来接收 POST 请求并解析 FormData 中的文件数据,然后将其保存到指定目录下。 这样就可以在 Vue.js 中将 Blob 文件存储到服务器上了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值