我们在搭建自己的博客系统或者是其他项目时，图片的存储是个不可避免的问题，个人中心会有用户的头像，写的文章可能也会有自己上传的图片，如果不利用图床，就要存储到自己的服务器上，但是图片存多了服务器的压力就会很重，这时候我们可以利用图床，把图片上传到专门存放图片的服务器来减轻自己服务器的压力

---

首先必须声明

• 市面上所有的免费图床都是不保证安全性的

要做好哪天图床崩溃，你的图片全都消失的准备，如果想要获得稳定的体验，还是要去使用付费图床

• 我要说的sm.ms图床免费是有限制的（5g）

如果要获得更多的存储空间，还是要使用付费版本

• 此图床对于demo级别够用了，如果是自己的博客建议上云服务的对象存储

---

具体步骤

1. 打开sm.ms官网链接地址，正常注册并登录
2. 打开右上角的Dashboard

3. 打开并生成自己的token复制下来，之后的写api的时候要用

4.配置跨域,在vue.config.js里添加代理（具体可以参考别人写的如何解决vue跨域的问题）

 devServer: {
        historyApiFallback: true,
        allowedHosts: 'all',
        proxy: {
            '/proxy': {
                target: 'https://sm.ms/', //接口的前缀'
                secure: true, //如果是https请求就加上
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/proxy': ''
                },
                headers: {
  //这里是最重要的地方，必须要携带Referer请求头，否则服务端会返回500错误码
  //（如果不加会检测到当前发送的域名不在它的服务器地址下采取安全措施返回500）
                    Referer: 'https://sm.ms/'
                }
            },
            
        }
    }

5.用你喜欢的http库发送请求（如axios,fetch)等 此处举个例子（我这里采用的是vant组件的上传文件功能）

const upload = (file) => {//这里的file是vant组件中上传的那个文件
const forms = new FormData()
forms.append('smfile', file.file)//这里名称必须是smfile
axios.post('/proxy/api/v2/upload', forms, {//添加了跨域代理，这里的/proxy就是https://sm.ms/
      headers: { 'Content-Type': 'multipart/form-data', Authorization: '自己的token' }
    })
}

官方的文档中有写接口文档可以在API Docs中查看（包含上传，删除等常用api）我这里列举出上传的api

请求地址	请求参数	参数类型	请求头
sm.ms/api/v2/uplo…	smfile	file	Content-Type: multipart/form-data Authorization: 自己的token

响应类型：

其中url就是图片上传后存到sm.ms的网络地址（拿来即用）

注意事项：

• 必须要添加跨域，具体去网上搜索vue如何解决跨域

• 文件类型必须是file类型，并且参数名称必须要是smfile

• 如果所有参数都正确却返回500错误码，90%是因为你在vue.config.js中请求头没有携带referer（不能在axios中携带）

• 请求头必须要携带自己的token