使用Element UI框架（基于vue2.0）的upload组件上传图片至七牛云

整体流程如下：

下面我们开始具体的流程：

一、写一个后台接口，用于生成七牛token

这里我使用的是python的tornado框架写的该接口，接口路由地址：/qiniu/upload/getToken

如果，你的前端和后台项目不是部署在一台服务器上或者部署在一台服务器上端口号不同的情况下，你需要考虑到跨域问题，python后台接口设置允许跨域的简单配置如下：

 

二、 在前端页面引入upload组件 官网地址 Element-网站快速成型工具

下面针对使用该组件上传图片至七牛云时，几个参数对应的说明

action 必选参数, 上传的地址。 此参数我们需要填写的是七牛云接收文件的地址，此处固定为七牛的华东一区域名：//http://upload.qiniu.com，还有其他几个域名可使用，详见下图 或七牛API文档--直传文件

 

before-upload 可选参数, 上传文件之前的钩子，携带的参数为上传的文件file

data 可选参数, 上传时附带的额外参数

file-list 上传的文件列表

三、在前端页面的before-upload钩子函数中获取token, 并绑定到上传时携带的data属性：包括key和token两个字段

 

在这个钩子函数里我们可以通过参数file获取到图片的原始文件名及属性信息，自定义一个上传时需要的文件名key,然后调用后台接口获取到token, 填充到该upload组件data属性中，在上传file时，一并上传

其中API.getImageToken(key)方法是使用的vue2.0官方推荐的网络库axios，请自行安装

 

 

四、通过该组件上传图片，即可在handleSuccess钩子中接收到上传成功的回调，包含key和hash两个字段

 

福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.