当前位置: 首页 > 前端 > JS

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

作者: admin 2019-08-19 20:26:40 阅读(305) 评论(0)

前言

将图片放在本地服务器会占用大量服务器存储空间,并减缓网页访问速度。因此,图床应运而生。我们可以在个人博客中将图片上传至图床,然后在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-Type multipart/form-data
Authorization 参照 Authentication

Body

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

返回数据

名称类型 是否必须 默认值 备注 其他信息
success boolean 必须 请求状态
code string 必须 请求状态码 枚举: error,success
message string 必须 消息
data object 非必须
├─ width integer 必须 上传图片的宽度
├─ height integer 必须 上传图片的高度
├─ filename string 必须 文件名
├─ storename string 必须 储存名
├─ size integer 必须 图片大小
├─ path string 必须 路径
├─ hash string 必须 图片删除HASH
├─ url string 必须 图片路径 format: uri
├─ delete string 必须 图片删除链接 format: uri
├─ page string 必须 图片专属链接 format: uri
RequestId string 必须 请求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编辑器显示出上传图片的路径并成功预览。

0 条评论