PicGo+华为云OBS搭建图床

最新推荐文章于 2025-02-22 12:41:05 发布
最新推荐文章于 2025-02-22 12:41:05 发布
阅读量2.2k 收藏 11
点赞数 5
分类专栏： 日常学习随笔 文章标签： 华为 obs PicGo Typora
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44289959/article/details/120631050
版权
本文详细介绍了如何利用PicGo配合华为云的对象存储服务（OBS）搭建个人图床，适合 Typora 用户进行图片上传。步骤包括购买华为云OBS、安装PicGo的华为云OBS插件、获取AccessKeyId和AccessKeySecret、新建桶、配置Endpoint以及可选的域名配置。按照指南操作，可以轻松实现便捷的图片托管服务。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

PicGo+华为云OBS搭建图床

文章目录

华为云OBS即对象存储服务，本文介绍了如何使用PicGo+华为云搭建图床，方便Typora使用图片上传。阿里云和腾讯云操作类型类似，可作为参考。

购买华为云OBS

购买链接：对象存储服务-控制台 (huaweicloud.com)

购买标准40G即可，也可根据需求扩充，可以先购买一个月，1块钱试一下能不能配好。

image-20211006214001310

PicGo 华为云OBS插件安装

打开picGo的插件设置，直接搜索huawei，安装即可

image-20211006214350912

所需概览

image-20211006214253286

参数名称类型描述是否必须
AccessKeyIdinput从我的凭证-访问密钥获取true
AccessKeySecretpassword从我的凭证-访问密钥获取true
桶名称input从OBS控制台获取true
EndPointinput桶基本信息中的Endpoint，从OBS控制台获取true
存储路径input图片在OBS中的存储路径，用户自定义false
网址后缀input图片处理表达式，用户自定义false
自定义域名input使用自定义域名替代OBS桶的域名，用户自定义false

获取AccessKeyId/AccessKeySecret

在华为云控制台搜索框中，直接搜索我的凭证

image-20211006214535227

打开以后在侧边栏打开访问密钥，然后创建密钥，输入备注信息，创建完成以后务必点击立即下载，然后打开csv文件即可得到AccessKeyId和AccessKeySecret。

新建桶

在桶列表中，选择创建桶

image-20211006215007879

在新建桶的配置中，桶策略务必改成公共读。

image-20211006215241776

创建完成以后，在桶列表中点击桶名称，然后点击对象，新建一个文件夹img或者其他名字也可以。

Endpoint

打开桶以后，有一个桶概览，里边有一个属性是Endpoint。

image-20211006215557128

域名配置 (非必须)

在域名管理中可以配置自己的域名。

image-20211006215944994

然后去域名解析管理中添加一条记录，类型选择CNAME，值就填上一张图上绑定用户域名的那个OBS桶域名。

image-20211006220207553

配置完成

image-20211006220748043.png

使用Typora验证设置

image-20211006220439619

华为云OBS加PicGO配置图床给Typora使用
qq_62077158的博客
03-04 594
华为云OBS对象存储服务加上PicGO配置图床
记一次信创系统下Typora+PicGo+华为云OBS，云图床配置
qq_41169485的博客
01-17 471
Typora + PicGO + 华为云OBS。Typora Linux版配置PicGo 华为云OBS对象存储，使用Typora写笔记图片自动上传到华为云储存桶。
picgo集成华为云图床并设置最小粒度权限
lc2288的博客
02-02 333
picgo集成华为云图床并设置最小粒度权限
详解typora配置华为云图床
正在自我救赎的菜鸟。本人所有内容均不收费，可随意转发，复制
11-10 1251
大部分博主使用的博客编辑方式为markdown格式，不同于富文本，在编辑博客时，markdown采取固定的排版方式，博主无需关注具体的编辑，只需要专注内容创作即可。typora和华为云对象存储OBS搭配不愧是开发者博主必备神器~
Typora+PicGo+华为云写博客
一份耕耘，一分收获
09-11 644
Typora+PicGo+华为云写博客
在typora中连接华为云obs图床
u012292264的博客
05-21 440
在typora中连接华为云的obs图床。
Typora Linux版配置PicGo 华为云OSS对象存储
SPECIAL8654237的博客
01-20 675
【Typora】Typora Linux版配置PicGo 华为云OSS对象存储
基于react+antd +华为云OBS，写上传+图片预览
HuangGuanShanYai的博客
07-04 1988
基于react+antd +华为云OBS，写上传+图片预览
obsidian与华为云存储OBS同步方法（Remotely Save+华为云OBS）
qq_45846810的博客
01-25 2210
桶列表点击 查看桶基本信息即可获取桶的服务地址。下载得到*.cvs文件，打开可以看到你的。服务地址（Endpoint) 需要加上。打开obsidian 点击左下角进入。付款成功后会调整到控制台，随后点击。日常操作时点击这个图标即可进行同步。选择需要的配置加入清单后付款购买。进入社区插件市场-浏览,搜索插件。输入在华为云获取的各项参数即可。在obs控制台总览页面点击。输入密钥备注（随意）后会弹出。点击图标进行插件设置。
华为云obs参考代码以及demo
07-18
OBS通过可信云认证，支持服务端加密、防盗链、VPC网络隔离、日志审计、细粒度权限控制，保障数据安全可信 高效 OBS通过智能调度，并结合传输加速、大数据垂直优化，为用户提供高并发、大带宽、稳定低时延的数据访问...
华为云云耀云服务器L实例评测 | 华为云+图床配置
weixin_46170708的博客
09-28 414
自定义图床项目方案： 云服务器 + Spring boot + PicGo图床是一个在线服务或软件，用于存储、管理和优化图像以供博客、网站或其他在线平台使用。它允许您上传图像，并生成用于在您的网站或博客中嵌入或引用这些图像的URL。一般来说，图床还提供图像优化和缩放服务，以使图像加载速度快，且不会对网站或博客的服务器造成过大负担。
【云服务器系列】基于华为云OBS实现Picgo和Typora的完美融合
热门推荐
优快云站内信: https://i.youkuaiyun.com/#/msg/chat/qyj19920704
08-11 2万+
对象存储服务（Object Storage Service，OBS）是一个基于对象的海量存储服务，为客户提供海量、安全、高可靠、低成本的数据存储能力。OBS 系统和单个桶都没有总数据容量和对象/文件数量的限制，为用户提供了超大存储容量的能力，适合存放任意类型的文件，适合普通用户、网站、企业和开发者使用。
picgo-plugin-huawei插件发布
坚果的博客
02-22 999
和华为云OBS上传插件。支持将图片上传到华为云对象存储，并作为图床使用。
搭建论坛及基于华为云OBS的私人共享网盘
灵活奋进，志诚分享，研究工业创新，分享工业技术。
02-25 966
简介 主页：https://buxue66.com 论坛：https://buxue66.com/forum 网盘：http://www.file.buxue66.com 安装nginx root@hecs-x-medium-2-win-20200619090054:~# sudo apt install nginx 安装mysql 数据库安装及初始化 root@hecs-x-medium-2-win-20200619090054:~# sudo apt install mysql-server-8.
马上领取免费图床——使用码云(gitee)坐一个免费图床V2.0
趣学程序
05-12 1475
目录效果前言第一个版本的缺陷解决问题具体步骤创建一个新的公开仓库创建私人令牌开始开发码代码常量管理类前端代码升级优点热点文章 效果 前言 第一版已完成，这篇文章是在第一版的基础上进行改造升级了。第一版的详细文章请见>>> https://blog.youkuaiyun.com/pyfysf/article/details/103990753 https://www.cnblogs.com/upuptop/p/12197125.html 第一版完成的预览图，目前我这里已经开发好了免费图床多人版本，并且
超好用：免费的图床
不安分的猿人的专栏
06-11 1万+
经常写文章的小伙伴可能会头疼，图片需要一张一张的上传，费劲也耗时，今天就推荐几款超简单的图床工具。图床就是一个在网络上存储图片的地方，目的是为了节省本地服务器空间，加快图片打开速度。话不多说，进入正题。 非技术手段 1.SM.MS 永久存储免注册，图片链接支持https，可以删除上传的图片，提供多种图片链接格式图片上传限制：每个图片最大5M，每次最多上传10张。你可通过浏览器上传图片，网址：...
阿里云OSS搭建博客图床
chen_z_p的博客
11-17 7941
1 什么是图床 图床就是一个储存图片的服务器，把图片上传到图床，通过连接就能获取到该图片。 2 为什么要图床 图床的作用是保存图片，我主要是保存博文中的图片。因为我在平时都是用 Typora 在本地写Markdown笔记，Markdown里的图片是文件外引用的，这样直接导入Markdown文件时相应的图片并没有导入。就会像这样： 必须重新上传所以图片，太麻烦了...
[已解决] 华为云创建chevereto图床 并在vue项目中实现图片上传功能
weixin_43494119的博客
01-09 796
1 Chevereto图床搭建 （建议安装1.4.2版本 方便后面汉化） 1.1 chevereto 下载链接 1.2 安装可参考如下文章： Chevereto图床搭建 | 利用云服务器搭建免费图床完整教程 Chevereto图床搭建教程 | 利用云服务器免费搭建私人图床 Chevereto——简介及安装 2 关于 Chevereto图床 汉化问题 2.1 chevereto图床最新1.5.1版本改成中文语言的方法 3 使用图片上传的api 使用postman测试如下 现在postman测试显示是成功了的
阿里云oss搭建图床以及使用PicGO上传图片到图床
JavaAlliance
04-24 6902
阿里云oss搭建图床以及使用PicGO上传图片到图床 最近喜欢上了使用markdown来写博客，可是markdown的图片却是本地的，如果我要发博客到GitHub上，那么就不行了，GitHub上是不能存图片的。于是干脆弄了个图床，本地截图的时候上传到图床，markdown中的代码结果也是图床里的，这样就解决了这个问题了。 一、开通OSS服务 oss是对象存储服务的意思 首先购买OSS服务（在...
django + vue + 华为云 obs 实现大文件上传
最新发布
03-10
<think>好的，我现在需要解决用户的问题：如何用Django、Vue和华为云OBS实现大文件上传。首先，我得理清楚整个流程，然后分步骤思考每个部分怎么实现。 用户提到了Django作为后端，Vue作为前端，华为云OBS作为存储服务。大文件上传通常会遇到网络不稳定、文件过大导致上传失败的问题，所以可能需要分片上传和断点续传的方案。华为云OBS支持分片上传，这点我记得没错的话，他们的API应该有相关的方法。 首先，前端部分，Vue需要实现文件分片。用户选择文件后，前端将文件切割成多个小块，每个分片单独上传。这里可能需要用到File API的slice方法。同时，为了管理上传进度和状态，可能需要一个任务队列，或者使用Promise.all来处理并发上传，但要注意浏览器并发限制，可能需要控制同时上传的分片数量。 然后，后端Django需要接收这些分片，可能需要对每个分片进行验证，比如校验MD5，确保分片正确。不过这里有个疑问，是否需要后端处理分片的上传，或者直接让前端上传到OBS？因为如果直接让前端上传到OBS，后端可能只需要生成预签名URL，这样可以减少服务器的负担。华为云OBS的预签名URL应该可以支持分片上传，这样前端直接和OBS交互，后端负责生成这些URL和完成上传后的处理。 这样的话，后端Django的角色可能主要是生成预签名URL，以及处理上传完成后的回调。比如，前端在上传所有分片后，通知后端，后端再向OBS发送完成分片上传的请求，合并所有分片。这样服务器不需要处理大量的文件传输，减轻压力，同时更安全，因为文件直接传到OBS，不经过服务器。 那具体步骤可能是这样的： 1. 前端选择文件，计算文件的MD5或其他哈希值作为唯一标识，用于后续分片标识和校验。 2. 前端向后端请求初始化分片上传，后端向OBS发起创建分片上传任务，获取Upload ID，并返回给前端。 3. 前端将文件分片，每个分片按顺序上传到OBS。对于每个分片，前端需要向后端获取该分片的预签名URL，然后直接PUT上传到OBS。 4. 所有分片上传完成后，前端通知后端完成上传，后端调用OBS的Complete Multipart Upload接口，合并分片。 5. 后端处理可能的回调，验证上传结果，返回最终的文件信息给前端。 这样，后端主要处理的是生成预签名URL、初始化上传和完成上传，而分片的上传由前端直接与OBS交互，效率更高，尤其是大文件的情况下。 接下来，需要确认华为云OBS的SDK是否支持生成预签名的分片上传URL。查阅华为云OBS文档，发现他们确实支持生成预签名URL，并且支持分片上传的相关操作。Python SDK中有create_multipart_upload, upload_part, complete_multipart_upload等方法。所以Django后端可以使用这些方法来生成每个分片的预签名URL。 另外，前端需要处理分片的上传，可能需要使用axios或其他HTTP库来发送PUT请求到OBS的预签名URL。每个分片的上传顺序可能不重要，因为OBS会根据分片号进行合并，但需要确保每个分片的编号正确。 在安全性方面，预签名URL需要有有效期限，防止被恶意利用。同时，后端需要对用户进行身份验证，确保只有授权用户才能获取预签名URL。 可能的挑战包括分片大小的选择，通常OBS对分片大小有最小限制（比如5MB），需要前端分片时注意。另外，前端计算文件的哈希值可能比较耗时，尤其是大文件，需要考虑使用Web Worker或优化算法，避免阻塞主线程。 还有断点续传的问题，前端需要记录已上传的分片，以便在上传中断后恢复时跳过已上传的部分。这可能需要本地存储，比如localStorage或IndexedDB，来保存上传状态。 总结下来，步骤大致如下： 1. 用户选择文件，前端计算文件哈希，向后端请求初始化上传，获取Upload ID和分片信息。 2. 后端使用华为云OBS SDK创建分片上传任务，获取Upload ID，返回给前端。 3. 前端将文件分片，为每个分片向后端获取预签名URL。 4. 后端为每个分片生成预签名URL，前端直接上传分片到OBS。 5. 所有分片上传完成后，前端通知后端，后端调用OBS完成分片合并。 6. 处理回调，返回上传结果给前端。 这样设计的好处是后端压力小，文件直接传到OBS，同时利用OBS的分片功能实现大文件上传。需要处理的关键点包括分片上传的预签名URL生成、前端分片逻辑、断点续传的支持，以及错误处理。 可能还需要考虑文件上传进度的显示，前端需要跟踪每个分片的上传进度，并汇总显示总体进度。这可以通过监听每个分片的上传进度事件，然后计算总和来实现。 另外，华为云OBS可能有上传分片的最大数量限制，需要确保分片数量不超过限制。例如，OBS允许最多10000个分片，所以分片大小需要根据文件大小调整，比如每个分片至少5MB，这样最大支持约50GB的文件。如果文件更大，可能需要调整分片大小。 最后，测试各环节的稳定性，比如网络中断后能否恢复上传，分片上传失败后的重试机制，以及合并分片时的错误处理。</think>### Django + Vue + 华为云OBS实现大文件上传分步指南 --- #### **一、技术方案核心思路** 1. **分片上传**：将大文件切割为多个小分片（如5MB/片），避免单次请求超时。 2. **直传OBS**：前端直接上传分片到华为云OBS，减轻服务器压力。 3. **预签名URL**：后端生成临时安全上传地址，控制权限和有效期。 4. **断点续传**：记录已上传分片，支持中途断网后恢复。 --- #### **二、华为云OBS配置** 1. **创建桶（Bucket）** - 登录华为云控制台，创建OBS桶，设置存储类别（标准/低频）。 - 记录`Endpoint`（如`obs.cn-east-3.myhuaweicloud.com`）和`Bucket名称`。 2. **生成访问密钥** - 在“我的凭证”中获取`AK`（Access Key）和`SK`（Secret Key）。 --- #### **三、Django后端实现** ##### 1. 安装依赖 ```bash pip install django obs-python-sdk ``` ##### 2. 生成预签名URL（核心代码） ```python # views.py from obs import ObsClient def generate_presigned_url(request): ak = 'YOUR_AK' sk = 'YOUR_SK' endpoint = 'obs.cn-east-3.myhuaweicloud.com' bucket_name = 'your-bucket' # 初始化OBS客户端 obs_client = ObsClient(access_key_id=ak, secret_access_key=sk, server=endpoint) # 生成分片上传的Upload ID if request.method == 'POST': file_key = request.POST.get('file_name') resp = obs_client.createMultipartUpload(bucket_name, file_key) upload_id = resp.body['uploadId'] return JsonResponse({'upload_id': upload_id, 'file_key': file_key}) # 生成单个分片的预签名URL elif request.method == 'GET': upload_id = request.GET.get('upload_id') part_number = request.GET.get('part_number') file_key = request.GET.get('file_key') # 生成上传URL（有效期1小时） url = obs_client.createSignedUrl( 'PUT', bucket_name, file_key, expires=3600, headers={'Content-Type': 'application/octet-stream'}, queryParams={ 'partNumber': part_number, 'uploadId': upload_id } ) return JsonResponse({'url': url}) ``` ##### 3. 完成上传合并分片 ```python def complete_upload(request): if request.method == 'POST': upload_id = request.POST.get('upload_id') file_key = request.POST.get('file_key') parts = json.loads(request.POST.get('parts')) # 分片列表[{partNumber: 1, etag: '...'}] obs_client.completeMultipartUpload( bucket_name, file_key, upload_id, parts ) return JsonResponse({'status': 'success'}) ``` --- #### **四、Vue前端实现** ##### 1. 文件分片逻辑 ```vue <template> <input type="file" @change="handleFileSelect"> </template> <script> export default { methods: { async handleFileSelect(e) { const file = e.target.files[0]; const chunkSize = 5 * 1024 * 1024; // 5MB/片 const chunks = Math.ceil(file.size / chunkSize); // 1. 初始化上传任务 const { data: { upload_id, file_key } } = await axios.post('/api/init_upload/', { file_name: file.name }); // 2. 上传所有分片 const uploadedParts = []; for (let i = 0; i < chunks; i++) { const start = i * chunkSize; const end = Math.min(start + chunkSize, file.size); const blob = file.slice(start, end); // 获取分片预签名URL const { data: { url } } = await axios.get('/api/get_upload_url/', { params: { upload_id, part_number: i + 1, file_key } }); // 直传OBS const { headers: { etag } } = await axios.put(url, blob, { headers: { 'Content-Type': 'application/octet-stream' } }); uploadedParts.push({ PartNumber: i + 1, ETag: etag }); } // 3. 通知后端合并分片 await axios.post('/api/complete_upload/', { upload_id, file_key, parts: uploadedParts }); } } } </script> ``` ##### 2. 进度显示优化 ```javascript // 使用axios拦截器跟踪进度 axios.interceptors.request.use(config => { if (config.url.includes('obs.myhuaweicloud.com')) { config.onUploadProgress = progressEvent => { const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100); console.log(`分片 ${config.params.partNumber} 上传进度: ${percent}%`); }; } return config; }); ``` --- #### **五、关键问题处理** 1. **分片大小选择** - 华为云OBS要求分片范围：5MB ≤ 分片 ≤ 5GB - 建议分片大小：10~20MB（平衡网络效率和并发性能） 2. **断点续传实现** - 前端通过`localStorage`记录已上传分片的`partNumber`和`ETag`。 3. **文件唯一性校验** - 后端可在初始化时校验文件MD5，避免重复上传。 --- #### **六、安全增强建议** 1. **预签名URL有效期**：建议设置为10~30分钟，防止URL泄露风险。 2. **服务端校验**：合并分片后，后端调用OBS接口校验文件完整性。 3. **HTTPS传输**：OBS桶启用HTTPS，确保数据传输加密。 --- #### **七、华为云OBS费用注意** - 分片上传会计费为`PutObject`请求次数（每分片一次）。 - 存储费用根据文件总大小计算（标准/低频存储不同定价）。 --- 通过以上步骤，可实现稳定的大文件上传方案，结合Django的管理能力、Vue的交互体验和华为云OBS的高可靠性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AYO_YO

老板大气！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值