Typora骚操作之自动上传图床

hik

@Ta 2020-11-22发布，2020-11-22修改 30315点击

昨天看的文章，我也转了并测试了下，gitee没测成功不知道是不是我设置问题，自建服务器成功，它基本思路是替换Typora中的window.html，html调用了作者写的js，js中监测是否插入了本地图片，有的话自动上传自建服务器、阿里云、腾讯云、又拍云、github等，并将markdown里的本地图片地址自动替换成远程图片地址。

项目地址：https://github.com/Thobian/typora-plugins-win-img

虽然作者说只支持windows，但我测试deepine上的Typora一样可以用，确实很方便，省去了先上传图床在手动插入链接的繁琐过程。我目前使用自建服务器，也就是将作者提供的upload.php上传到我自己服务器上的一个文件夹

但是有个问题，作者定义接口的时候定义了token（如下），但是提供的upload.php中没用到校验啊，请问如何修改呢？让upload.php只能上传指定token用户的图片？各位php大佬求解 @老虎会游泳

//将图片上传地址换成你自己的后端接口，由于调用时不带登录态，请注意接口安全别被坏人利用
//为了防止坏人利用你服务器接口，插件支持设置请求头，可一定程度避免被利用
//接口协议：
//请求方式：POST
//请求参数：data:image/png;base64,xxxxxx （图片原转换成base64后的值）
//成功响应：{'code':0, 'message':'成功', 'data':{'url'=>'imageURL'}} 
//失败响应：{'code':x, 'message':'错误原因', 'data':null} 失败时，code必须未非0
//后端接口代码可以参考代码文件：`upload.php`
$.image.init({
    target:'self',
    self:{
        //默认上传地址 https://jiebianjia.com/typora-plugins/upload.html
        url:"https://you-server/the-image-upload-path",
        headers:{
            //默认: token:B40289FC92ED660F433BF0DB01577FDE
            token:"value"  //自己定义好，并在接口里面检查避免坏人利用你接口
        }
    }
});

安装教程：只需要下载的window.html与plugins文件夹复制到Typora安装目录resources\app中即可，window.html建议备份一份，upload.php为自建服务器程序示例。

文件打包：
typora-plugins-win-img-master.zip（439.06 KB）

不需要老虎帮忙了，突然想到个妙计，我把upload.php文件名改成其它的不就行了，这样虽然这个接口可以随意传东西，但别人不知道这个地址
https://cway.top

隐藏样式查看源码

回复列表(14|隐藏机器人聊天)

1

hik

@Ta / 2020-11-22 / 样 / 源

知道gitee为什么上传失败了，因为必须得定义文件夹，因此建立的仓库里也必须新建目录，使用根目录会提示服务器错误，gitee可用WebIDE新建目录： https://gitee.com/-/ide/project/用户名/仓库名/edit/master/-/ https://cway.top
3

笨蛋海绵

@Ta / 2020-11-22 / 样 / 源

我都是 notepad2 写文章的，没用过专门的 markdown 编辑器
https://qzkyl.ml
4

hik

@Ta / 2020-11-22 / 样 / 源

亲测gitee码云对超过1M的图片不显示
https://cway.top
5

罐子

@Ta / 2020-11-23 / 样 / 源

@hik，用不了最新版用不了啊
6

hik

@Ta / 2020-11-23 / 样 / 源

@罐子，可以的，我用0.9.96，不同版本应该都可以，Typora好像是用谷歌浏览器的内核改的，可以按shift+F12看控制台报错，window.html不要直接替换。
可以把备份下来的 window.html 文件恢复回去。
然后手动编辑恢复回去的文件，搜索<script src="./app/window/frame.js" defer="defer"></script> 在其后面加上一行：<script src="./plugins/image/upload.js" defer="defer"></script> 然后再试试是否能恢复正常。
注：readme中覆盖 window.html 只是为了引入 ./plugins/image/upload.js 文件，但不同版本window.html文件可能存在一些差异，确实有可能出现你说的这个问题。
https://cway.top
7

hik

@Ta / 2020-11-23 / 样 / 源

@罐子，我也是头一回发现typora就是个不能浏览网页的浏览器
https://cway.top
8

无道

@Ta / 2020-11-23 / 样 / 源

最好是用cli command line来上传文件，如果还要通过php服务器来传输（中转）的话，可能延迟，超时。

typroa自带图片上传功能：

你要做的是写个本地cmd，然后上传就可。

可以用php xxx.php来上传，总之最好避免一个服务器中转上传到各种object storage

当然，最好的我觉得使用一种可以编译本地可执行文件的语言来写，比如go，php或python都需要本地环境。

红米Note7 高配版(黑色)
9

无道

@Ta / 2020-11-23 / 样 / 源

当然，command line 也有一个现成的工具： PicGo

如果不喜欢有可视化界面的，可以安装node.js实现的：

https://www.npmjs.com/package/picgo
红米Note7 高配版(黑色)
10

罐子

@Ta / 2020-11-23 / 样 / 源

@hik，目测按@无道，的说法可以使用minio
11

hik

@Ta / 2020-11-23 / 样 / 源

@罐子，但是这种实际只是引用一个js，我觉得不比自带的差(其实自带的不会配置也是一个原因)
https://cway.top
12

罐子

@Ta / 2020-11-24 / 样 / 源

@hik，想用golang写一个上传插件但是不知道自己的水平能不能搞定。

hik

@Ta / 2020-11-25 / 样 / 源

@罐子，应该很好写，我用java模拟了下

public class Main {
    public static void main(String[] args) {
        for (String arg : args) {
            System.out.println(upload(arg));
        }
    }
    
    public static String upload(String path){
//        根据路径上传文件并返回上传后的图片地址
        
//        模拟返回数据
        return "https://"+path;
    }
}

命令行就是

java -jar /home/hik/typoraUpload.jar

Typora要求的返回数据就是控制台的数据，数据格式如下，这就简单了，上传图片，返回网址，换行输出就行了

http://remote-image-1.png
http://remote-image-2.png

https://cway.top

14

希望自己长胖胖

@Ta / 2021-09-22 / 样 / 源

@hik，@老虎会游泳，
求问哪一个是Typora官网啊，这俩是不是有一个是假的啊？
https://www.typora.net
https://www.typora.io
15

hik

@Ta / 2021-09-23 / 样 / 源

@希望自己长胖胖，肯定是io啊，这是外国人开发的，net应该是国人兴趣使然建的中文站，就像phpbb跟phpbb中文站一样
https://cway.top

添加新回复

回复需要登录。