利用SM.MS图床API上传图片

利用SM.MS图床API上传图片

前言

将图片放在本地服务器会占用大量服务器存储空间,并减缓网页访问速度。因此,图床应运而生。我们可以在个人博客中将图片上传至图床,然后在markdwon编辑器中写入该图片的超链接,既减轻了服务器压力,也加快了网页图片的加载速度。

但有时一张一张地上传然后再拷贝图片链接至文本中会非常不方便。因此,我选择了 SM.MS 图床,该图床免费,访问速度也不错。更关键的是,可以在 markdown 编辑器中利用 ajax 脚本向 SM.MS 图床发送请求,上传图片,并获取图片链接,这样就大大节省了时间。

在这里,将介绍如何通过 ajax 调用 SM.MS图床 API向 SM.MS图床 上传图片。本文中主要论述 ajax 请求 SM.MS图床 的 API 实现流程,不具体论述 markdown 编辑器的使用方法。我在这里使用的markdown编辑器是 vditor

1. SM.MS图床API

基本信息

Path: /api/v2/upload

Method: POST

接口描述:

图片上传接口

请求参数

Headers

参数名称参数值是否必须示例备注
Content-Typemultipart/form-data
Authorization 参照 Authentication

Body

参数名称参数类型是否必须示例备注
smfilefile 上传文件
formattextjson输出的格式。可选值有 json、xml。默认为 json

返回数据

名称类型是否必须默认值备注其他信息
successboolean必须请求状态
codestring必须请求状态码枚举: error,success
messagestring必须消息
dataobject非必须
├─ widthinteger必须上传图片的宽度
├─ heightinteger必须上传图片的高度
├─ filenamestring必须文件名
├─ storenamestring必须储存名
├─ sizeinteger必须图片大小
├─ pathstring必须路径
├─ hashstring必须图片删除HASH
├─ urlstring必须图片路径format: uri
├─ deletestring必须图片删除链接format: uri
├─ pagestring必须图片专属链接format: uri
RequestIdstring必须请求ID

2. 编写JS

  • 先通过 let formData = new FormData() 创建formData对象。

  • 然后获取需要上传的图片文件对象f,利用append()方法将文件对象f写入formData中。注意写入时,参数名称为API文档中的 smfile。大致代码如下,仅供参考。

    //自定义上传图片  
    handler(file) {  
        let formData = new FormData(), flag = 1;  
        file.forEach(f => {  
            if (f.size / 1024 > 1536) { //校验图片大小  
                layer.msg("上传图片大小不能超过1.5M");  
                flag = 0;  
                return;  
            }  
            formData.append('smfile', f, f.name);  
        });  
        if (flag === 1) {  
            uploadImgToSM(formData);  
        }  
    }  
  • 编写ajax,注意参数值,这里调用的是SM.MS图床的V2版本的API,请求地址是https://sm.ms/api/v2/upload。在ajax中写入url,data和 dataType,注意不能遗漏
    contentType: false, //不处理数据
    processData: false,
    cache: false,
  • 具体ajax代码如下。
   $.ajax({   
        type: 'POST',   
        url: 'https://sm.ms/api/v2/upload',   
        data: formData,   
        dataType: 'JSON',   
        contentType: false, //不处理数据   
        processData: false,   
        cache: false,   
        success: function (data) {   
            if (data.success) {   
                vditor.focus();   
                let img_url = '\n![](' + data.data.url + ')\n';   
                vditor.insertValue(img_url);   
            } else {   
                    layer.msg("上传失败!")   
            }   
        },   
        error: function (data) {   
            console.log(data);   
        }   
   });
  • 需要对返回的数据进行解析,将 data.data.url 图片链接写入 markdown 编辑器。返回的数据参数和类型可以参阅前面的 SM.MS图床API

  • 经过测试,SM.MS 图床 V2 版本 API 只支持单图片上传。

3. 测试

  • 选择要上传的图片,点击打开。

  • 等待片刻后,markdown编辑器显示出上传图片的路径并成功预览。

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.cangmangai.cn/archives/upload-img-to-smms

Buy me a cup of coffee ☕.