【怕图片丢失?本地图片路径配置繁琐?】typera+picgo+七牛云+自定义域名,教你三步构建属于自己的图床

准备工作:申请空间,绑定域名

  1. 在七牛云创建免费10G的对象存储空间
    位置尽量选境外,否则域名还需备案
    在这里插入图片描述
  2. 购买自己的域名(这里在腾讯云购买,首单一年一元【非广告】)
  3. 域名解析中添加一个二级域名,作为七牛云空间的解析域名
    七牛云空间默认的测试域名只有30天,所以要绑定自己的域名,才能实现永久访问
    分别填写:二级域名名称,CNAME,默认,随便填一个默认的地址(占位作用,之后会更改),然后确认
    在这里插入图片描述
  4. 七牛云空间中配置域名,在自定义源站域名里绑定
    在这里插入图片描述

配置picgo

这是用来配置自动上传到图床的工具

  1. 下载picgo
    下载安装好是这样的:
    在这里插入图片描述
  2. 填写七牛云账号的信息
    • 查看秘钥信息
    • 访问网址就是上面配置的二级域名
    • 存储区域选择:
      在这里插入图片描述
      在这里插入图片描述
      访问网址前面一定要带上协议:http://,不然typera识别不出来图片

配置typera

偏好设置里如下设置
picgo路径改成自己的picgo安装路径
在这里插入图片描述可以点一下验证图片上传选项,验证上述是否配置成功

结束

以上配置完成之后,写md时直接复制到typera里的图片就会自动上传到七牛云空间,再也不怕图片丢失,也不用在意本地路径问题啦。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,需要在七牛云上创建一个存储空间,并获取该存储空间的accessKey、secretKey、bucket和domain。 2. 在Springboot中引入七牛云的Java SDK,可以通过Maven或Gradle进行引入。例如,在Maven中添加以下依赖: ``` <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency> ``` 3. 创建一个七牛云配置类,用于存储accessKey、secretKey、bucket和domain等配置信息。 ``` @Configuration public class QiniuConfig { @Value("${qiniu.accessKey}") private String accessKey; @Value("${qiniu.secretKey}") private String secretKey; @Value("${qiniu.bucket}") private String bucket; @Value("${qiniu.domain}") private String domain; @Bean public Auth auth() { return Auth.create(accessKey, secretKey); } @Bean public Configuration configuration() { return new Configuration(Zone.zone0()); } @Bean public UploadManager uploadManager() { return new UploadManager(configuration()); } @Bean public BucketManager bucketManager() { return new BucketManager(auth(), configuration()); } @Bean public StringMap putPolicy() { StringMap putPolicy = new StringMap(); putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"name\":\"$(fname)\",\"size\":$(fsize)}"); return putPolicy; } @Bean public String uploadToken() { return auth().uploadToken(bucket, null, 3600, putPolicy()); } @Bean public String domain() { return domain; } } ``` 4. 在Vue中使用element-ui的上传组件,设置上传的接口为Springboot的接口。 ``` <el-upload class="upload-demo" action="/api/upload" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="{Authorization: 'Bearer ' + token}" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 5. 在Springboot中编写上传接口,在该接口中使用七牛云的Java SDK进行上传。 ``` @RestController @RequestMapping("/api") public class UploadController { @Autowired private UploadManager uploadManager; @Autowired private String uploadToken; @Autowired private String domain; @PostMapping("/upload") public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) throws IOException { try { Response response = uploadManager.put(file.getBytes(), null, uploadToken); if (response.isOK()) { String key = JSON.parseObject(response.bodyString()).getString("key"); return ResponseEntity.ok(domain + "/" + key); } } catch (QiniuException e) { e.printStackTrace(); } return ResponseEntity.badRequest().build(); } } ``` 6. 程序运行后,在Vue中上传图片即可自动将图片上传到七牛云,并返回图片的访问URL。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值