elementui upload组件 上传视频到七牛云
-
首先，需要获取Token，需要后端小伙伴配合
后端小伙伴写好了接口，vue写个方法获取，建议使用Promise
/// vue写获取token方法
async getPicToken({ commit }) {
try {
const { result } = await request({
url: getTokenURL,
commit,
})
// 这里为了后去控制流程 => return Promise
return Promise.resolve(result)
} catch (e) {
$message(e.message)
}
},
-
尝试版 我们使用七牛云直接上传
const file = document.getElementById('file')
const formData = new FormData()
const time = new Date().getTime()
const token = await this.getPicToken()
formData.append('file', file)
formData.append('key', `video${time}`)
formData.append('file', file)
formData.append('token', token)
request({
url: 'http://upload.qiniu.com',
method: 'POST',
data: formData,
}).then(res => {
console.log(res)
})
我们获取了token打通了上传 但是，上传后文件读取出问题，我们换个思路，直接用elementui upload组件
-
正式版 使用upload
<el-upload
ref="upload"
action="http://upload.qiniup.com"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:auto-upload="true"
:limit="1"
:data="form"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
上传url我这里是
http://upload.qiniup.com不同的用不同的url [文档地址]
Snipaste_2019-03-09_23-37-15.png
-
上传在before-upload前需要获取token
async beforeAvatarUpload(file) {
const fileType = file.type
const current = new Date().getTime()
const key = `video_${current}` // key为上传后文件名 必填
const isLt20M = file.size / 1024 / 1024 < 20 // 算出文件大小
this.fileSize = file.size // 存储文件大小
if (!isLt20M) { // 这里我们限制文件大小为20M
this.$message.error('最大只能上传20M!')
this.$ref.upload.abort()
return isLt20M
}
if (fileType !== 'video/mp4') { // 限制文件类型
this.$ref.upload.abort()
this.$message.error('只能上传MP4格式视频!')
return false
}
try {
const token = await this.getPicToken()
this.form = {
key,
token,
}
return true
} catch (error) {
return error
}
},
before-upload 如果返回false或者 返回promise reject会终止，但是实测还是会调用七牛运上传，不过没有token和数据也能接受
这里一直出现一个问题：上传到七牛云一直报400错误
Snipaste_2019-03-09_23-34-12.png
怀疑是异步搞得鬼
-
改成按钮点击才上传到七牛云
auto-upload:false
submitUpload() {
this.$refs.upload.submit()
},
还是出问题 怀疑是token慢了 在页面一加载的时候获取token
还是不对
查了半天终于发现
一定要在data写form //this is !important
-
基本完成，但是还有点小瑕疵
上传如果不符合要求 还会显示上传进度
Snipaste_2019-03-09_23-40-59.png
解决办法:在beforeAvatarUpload return前
this.$ref.upload.abort()
可以中断上传
Snipaste_2019-03-09_23-41-14.png
文档说clearFiles不能用 实测可用 为了稳定 还是使用abort
-
上传搞定，接下来就可以愉快的把链接给后端小伙伴存储在数据库使用了
后续：
万恶的产品还要加图片上传 而且加只能上传一张的限制 文档中说是使用limit 我们在组件里使用limit=1 发现还是有上传的按钮
Snipaste_2019-03-09_23-41-32.png
这里我们通过css的办法解决
<el-upload
:class="{hide:!isShowUpload}"
ref="upload"
action="http://upload.qiniup.com"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:auto-upload="true"
:limit="1"
:accept="'image/*'"
:data="form"
list-type="picture-card"
>
<i class="el-icon-plus"></i>
<!-- <el-button v-show="isShowUpload" slot="trigger" size="small" type="primary"></el-button> -->
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
</el-upload>
<style lang='less'>
.hide .el-upload--picture-card {
display: none;
}
</style>
这里我们操作不到按钮 但是我们发现它有el-upload--picture-card这个class
Snipaste_2019-03-09_23-41-46.png
所以在el-upload 加个hide class :class="{hide:!isShowUpload}" 可以解决
注：在vue有个小问题，一般我们在style里会写scoped 上面写法会不生效，需要去除scoped
Snipaste_2019-03-09_23-41-32.png
