SM.MS图床api调用

最新推荐文章于 2024-04-29 10:40:41 发布

南北江

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量1.8k

点赞数 3

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/m0_57533339/article/details/125402560

版权

第一步：注册sm.ms账号，并获取API Access：

第二步：HTML结构，我用的是vue

 <input type="file" accept="image/*" ref="picture" multiple="multiple" @change="getPicture($event)"/>

方法：

  function getPicture(e) {

    var formData = new FormData();

      formData.append("smfile", e.target.files[0]);

      axios({

        // 请求类型

        method: "POST",

         url: "/upload",//sm.ms图床

         headers:{'Content-Type':'multipart/form-data','Authorization':'你的API Acceaa'},

          data:formData

      }).then((response) => {

        // 在控制台输出响应体中图片在服务器中的url地址

        console.log(response.data)//response.data就有返回的图片地址

      });

    } //存储图片

响应数据：

第三步：配置跨域：


module.exports = {
    devServer: {
        proxy: {
            '/upload': {
                target:'https://sm.ms/api/v2/upload',//这里填入你要请求的接口的前缀
                // ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                secure: true,                   //是否https接口
                pathRewrite:{
                    '^/upload':''//重写路径
                }
            }
        }
    },
    lintOnSave:false 
}

大致流程就是这样，代码复制过去用就行