昨天问了一下element团队，他们还没有试过用element-ui的upload组件传图片到七牛云
我试了一天发现没问题，同时觉得七牛并没有一个前端后端流程都演示到的demo，于是再次记录一波
流程
后端配置好七牛相关的accessKey后端构建好上传策略，用来生成消费次数只有1次的上传Token后端暴露一个api，返回上面的Token前端在上传前请求后端的api获得上传Token前端上传完毕，获得七牛返回的图片地址
前置
七牛相关
公钥和私钥一个对象存储Bucket一个数据处理队列PipelineBucket的一个外链域名
对应配置字段
qiniuAccessKey:
'',
qiniuSecretKey:
'',
qiniuBucketHost:
'',
qiniuBucketName:
'',
qiniuPipeline:
''
文档
element upload七牛前端api
够隐蔽了，我翻了两小时都没翻到，还以为七牛没暴露上传的api呢，最后是同事指出地址的 上传策略简介上传策略api文档多媒体图像高级处理api文档数据处理队列api
这个api是用来查看数据处理的出错信息的，因为七牛的控制台在失败时只会给你看“处理失败”这个四个字
后端
let qiniu =
require(
"qiniu")
qiniu.conf.ACCESS_KEY = qiniuAccessKey;
qiniu.conf.SECRET_KEY = qiniuSecretKey;
let fops =
'imageMogr2/format/webp'
const policy =
(name, fileName) => {
let encoded =
new Buffer(
`${qiniuBucketName}:webp/${fileName}`).toString(
'base64')
let persist
if (qiniuPipeline !==
'') {
persist = {
persistentOps:
`${fops}|saveas/${encoded}` ,
persistentPipeline: qiniuPipeline
}
}
else {
persist = {}
}
return Object.assign({},persist,{
scope: name,
deadline:
new Date().getTime() +
600,
})
}
const getQiniuTokenFromFileName =
(fileName) => {
let key =
`${qiniuBucketName}:${fileName}`
let putPolicy =
new qiniu.rs.PutPolicy2(policy(key, fileName));
let upToken = putPolicy.token();
return {
upToken,
key,
bucketHost,
supportWebp: qiniuPipeline !==
''
};
}
module.exports = getQiniuTokenFromFileName;
如上代码，导出一个参数为文件存储根路径的函数，再用它新增一个路由即可
主要调用了qiniu.rs.PutPolicy2这个api，传入一个上传策略对象，生成一个消费次数只有一次的图片上传token，供给前端上传
上传策略只需要指定文件根路径scope以及deadline，除此之外，上面的代码还另外调用了多媒体图像高级处理接口，将图片异步转为webp格式，并在最终导出一个是否支持webp的supportWebp字段。
这里有一个坑，persistentOps字段要求是base64编码，然而其他的api又要求url编码，坑了我半天
前端
HTML
<
el-dialog title=
"图片上传" v-model=
"isUploadShow">
<
el-upload
action=
"//up.qbox.me/"
type=
"drag"
:thumbnail-
mode=
"true"
:
on-success=
"handleSuccess"
:before-upload=
"beforeUpload"
:data=
"form"
>
<i class=
"el-icon-upload"></i>
</
el-upload>
</
el-dialog>
七牛up.qbox.me域名支持http和https上传。api文档里并没有写这个，而是写在Q&A里的
JS
data () {
return {
isUploadShow: false,
supportWebp: false,
bucketHost:
'',
form: {}
}
}
vue2组件的data如上
beforeUpload (file) {
let curr = moment().format(
'YYYYMMDD').toString()
let prefix = moment(file.lastModified).format(
'HHmmss').toString()
let suffix = file.name
let key =
encodeURI(
`${curr}/${prefix}_${suffix}`)
return api.getImageToken({ key }).then(
response => {
this.bucketHost = response.bucketHost
this.supportWebp = response.supportWebp
this.form = {
key,
token:
this.upToken
}
})
},
通过getImageToken这个api，将上传token请求下来，并获得图片外链的地址，以及是否支持webp，如果支持webp，上传成功后就给图片链接根路径加上webp/前缀。
handleSuccess (response, file, fileList) {
let key = response.key
let name = file.name
let prefix =
this.supportWebp ?
'webp/' :
''
let img =
`})`
},
