最进在做网站的后台管理功能，需要能够对数据库的文章进行“增，删，改，查”，但是遇到了图片保存的问题，如果采用前端上传图片至后端，然后后端保存，数据库存储图片的相对路径，这种方式感觉有点麻烦，于是就在寻求更简单的解决方案，那么有没有一种前端上传图片存储，直接返回图片外链的解决方案呢？
最终，我选择了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">
<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
最终结果如下：
在七牛云的管理平台中，就可以看到我们上传的图片了
