又做了一个图床,chrome插件-minio图床

又做了一个图床,chrome插件-minio图床

月光魔力鸭

2022-05-19 11:54 阅读 545 喜欢 0

很久之前学习chrome扩展插件的时候已经做过一个了,好久没咋用,最近又跑了一个存储服务,准备在配合这个服务做个图床,以后就用这个了,之前的服务器到期忘了迁移数据都没了,这次换了服务器,在家里了,估计以后不会再做了吧,这个算是最后一个了,有啥问题就在这个进行优化了。

网上的图床有很多,免费的也不少,为啥要自己搭建呢.. 你懂的,还不是有不少图片不适合放在别人那,还是自己的最放心,正好最近家里带宽升级到1G了,跑个服务器,加点硬盘搞起来。

图床

图床是啥就不介绍了,这次的小东西分为三个部分:minio服务 chrome插件后端 chrome插件 .

由于自己比较懒,不想管理,我的图床就不介绍给大家使用了 。 先上图:

插件弹出 选项页面 存储桶内列表

minio

MinIO 是全球领先的对象存储先锋,目前在全世界有数百万的用户. 在标准硬件上,读/写速度上高达183 GB / 秒 和 171 GB / 秒。 对象存储可以充当主存储层,以处理Spark、Presto、TensorFlow、H2O.ai等各种复杂工作负载以及成为Hadoop HDFS的替代品。 MinIO用作云原生应用程序的主要存储,与传统对象存储相比,云原生应用程序需要更高的吞吐量和更低的延迟。而这些都是MinIO能够达成的性能指标。 官网链接:http://www.minio.org.cn/ 官网使用文档: http://docs.minio.org.cn/docs/ 具体如何部署,这里就不细说了,还是很简单的,下载后直接运行就可以了,有一个问题是,部署后这个站点内的文件分享地址怎么调试都不正确,本来想做个油猴,后来想着还有粘贴上传呢,最终还是做了图床。

插件后端

后端使用thinkjs框架开发的,只提供了api接口,本来还想着能不能直接通过前台js来调用SDK,也没找到文档,最终放弃了,跑了一个api服务,提供给插件使用 。

插件前端

插件前端使用chrome扩展插件来实现的,使用上更加方便一些,不需要再去打开网页,直接点图标就OK了。开发上使用了vue + elementui来实现的。

相关核心代码

代码虽然不多,但是放在文章也不合适,这里只放一丢丢,具体的源码(仅包括后端接口+插件)可以到我的小店进行购买,不提供部署安装哦 。


//上传文件
  async uploadAction() {
    let file = this.file('file');
    let data = this.post();
    if (!file) {
      return this.json({ success: false, msg: '没有发现上传文件数据' });
    }
    //开始上传
    let { name } = file;
    if (name == 'image.png') {//截图上传
      name = '截图' + (+new Date()) + '.png';
    }
    let { bucketName, prefix } = data;
    prefix = prefix || '';
    let fileName = prefix + name;
    let statFile = null;
    if (!bucketName) {
      return this.json({success:false,msg:'参数配置错误,上传失败'})
    }
    try {
      statFile = await minio.statObject(bucketName, fileName);  
    } catch (err) {}
    
    if (null == statFile) {
      await minio.fPutObject(data.bucketName, fileName, file.path, file.type);  
    } else {
      //重新生成一个id
      let r1 = Math.ceil(Math.random() * 3000);
      let r2 = Math.ceil(Math.random() * 3000);
      fileName = prefix + path.basename(name,path.extname(name)) + '-' + r1 + '-' + r2 + path.extname(name);
      await minio.fPutObject(data.bucketName, fileName, file.path, file.type);  
    }
    fs.unlinkSync(file.path);
    return this.json({ success: true ,msg : '上传成功',fileName : fileName});
  }

pasteObj.removeEventListener('paste').addEventListener('paste', function (event) {
        if (event.clipboardData.items.length > 0 && event.clipboardData.items[0].type.indexOf('image') > -1) {
          var file = event.clipboardData.items[0].getAsFile();
          var fd = new FormData();
          fd.append('file', file);
          fd.append("bucketName", that.uploadData.bucketName);
          fd.append("prefix", that.uploadData.prefix||'');
          ins({
            url: that.uploadUrl,
            method: 'post',
            data: fd,
            processData: false,
            contentType: false
          }).then(rs => {
            that.$message(rs.data.msg);
            that.copy(that.host + '/'+ that.uploadData.bucketName+'/'+(that.uploadData.prefix||'')+ rs.data.fileName);
          })
        } else {
          that.$message('粘贴板中没有内容或不是图片');
          return false;
        }
        return false;
      });
    }

转载请注明出处: https://chrunlee.cn/article/chrome-minio-picbed.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
ffmpeg 采集摄像头进行推流,然后播放,实现直播。
最近一直琢磨着做一个第三方统一登录的这么一个小东西,虽然网上其实也挺多的.. 不过造轮子的感觉还是很爽的。 QQ /Github 比较简单,申请下就OK 了.. 微信真不是个东西,得花钱。
最近感觉docker挺好用的,由于测试服务器经常重装,这里先记录下compose文件,后边重装直接复制就行啦。
昨天实现一个tabbar的时候发现怎么都无法跳转,直接拿的官方的demo,后来才发现是自定义tabbar的问题。
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
最近看某站壁纸挺好看的,抓了几百张放本地...可总不能每天手动去换吧,就做了一个随机更换的小工具。
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
本篇文章以一个实际的小项目为主题进行从头到尾的讲解实现,该项目总计开发时长约6小时,主要是有很多页面或功能都是现成的,直接复制过来的,剩下的就调整下样式、字段内容等。