element UI+七牛云快速搭建图片服务器

最进在做网站的后台管理功能，需要能够对数据库的文章进行“增，删，改，查”，但是遇到了图片保存的问题，如果采用前端上传图片至后端，然后后端保存，数据库存储图片的相对路径，这种方式感觉有点麻烦，于是就在寻求更简单的解决方案，那么有没有一种前端上传图片存储，直接返回图片外链的解决方案呢？

​ 最终，我选择了element UI +七牛云对象存储来快速搭建图片服务器的解决方案。

element UI

element UI是饿了么出品的一套基于vue的开元UI组件库，提供了非常强大的文件上传功能，只要指定上传url就可以使用ajax实现图片的上传，并且支持拖拽功能。

七牛云对象存储

在七牛网注册后并且实名认证后会有10G的永久免费的对象存储，我们利用这10个G的存储基本可以满足我们的日常需要。

具体实现

1.注册七牛云

首先，注册七牛云，并且完成实名认证（七牛云的实名认证可以通过支付宝来授权验证，很方便），完成后会在个人中心->秘钥管理中看到两个秘钥AccessKey/SecretKey，然后创建自定义名字的对象存储空间，

在创建存储空间的时候，可以选择私人空间，但是图片的外链访问都需要秘钥，公共空间则不需要。

为了实现上传，我们还需要生成上传凭证，关于凭证，可以参看文档，并且在文档结束后还有demo，因为是个人项目，为了简单，我直接从demo中生成了deadline为1000多小时的秘钥，确保不会过期,

填入ak,sk,以及bucketName(就是开始创建的对象存储空间的名字)，deadline修改demo的源代码再重新运行即可。

生成token后，就可以实现上传了。

2.引入element UI

关于element UI的安装和引入可以参见官网的文档，引入完成后就可以在vue文件中的template中使用文件上传组件，注意，上传组件默认是自动上传的，即选择完图片就可以直接上传，不需要额外的事件来触发。

代码如下：

<el-upload
    action="http://upload-z1.qiniu.com"  
    :drag="true"
    :on-success="handleAvatarSuccess"
    :on-error="handleError"
    :before-upload="beforeAvatarUpload"
    :data="postData">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>      </div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不      超过500kb</div>
</el-upload>

渲染效果：

参数说明：

action是上传的URL，为必选项，
drag表示是否支持拖拽
on-success钩子，上传成功
on-error上传失败
before-upload上传之前，可以用来判断上传类型是否符合要求，不符合停止上传
data是一个对象，用来表示上传时附带的额外参数

这个URL是由七牛云提供，在创建存储空间的时候会选择地区，不同的地区有不同的URL，而且http和https也是不同的URL，具体可以参见官方文档。

由于七牛云的上传需要秘钥，所以需要定义额外的data来上传附带的额外参数。

在script标签中，定义一个对象保存token

postData: {
    token: 'your token'
}

js代码：

methods: {
      handleAvatarSuccess(res, file) {   //上传成功后在图片框显示图片
        this.imageUrl ='http://oq34prjoz.bkt.clouddn.com/'+ res.key
        console.log(res)
      },
      handleError(res) {   //显示错误
        console.log(res)
      },
      beforeAvatarUpload(file) {    //在图片提交前进行验证
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG&&!isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isPNG && isLt2m
      }
    }

上传成功后会返回一个对象，包含一个hash和一个key，然后前边加上七牛云为你随机分配的域名就是图片的外链,

http://oq34prjoz.bkt.clouddn.com/'+ res.key

最终结果如下：

在七牛云的管理平台中，就可以看到我们上传的图片了