elementui upload組件 上傳視頻到七牛云
-
首先,需要獲取Token,需要后端小伙伴配合
后端小伙伴寫好了接口,vue寫個(gè)方法獲取,建議使用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打通了上傳 但是,上傳后文件讀取出問題,我們換個(gè)思路,直接用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 // 存儲(chǔ)文件大小
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會(huì)終止,但是實(shí)測(cè)還是會(huì)調(diào)用七牛運(yùn)上傳,不過沒有token和數(shù)據(jù)也能接受
這里一直出現(xiàn)一個(gè)問題:上傳到七牛云一直報(bào)400錯(cuò)誤
懷疑是異步搞得鬼
-
改成按鈕點(diǎn)擊才上傳到七牛云
auto-upload:false
submitUpload() {
this.$refs.upload.submit()
},
還是出問題 懷疑是token慢了 在頁(yè)面一加載的時(shí)候獲取token
還是不對(duì)
查了半天終于發(fā)現(xiàn)
一定要在data寫form //this is !important
-
基本完成,但是還有點(diǎn)小瑕疵
上傳如果不符合要求 還會(huì)顯示上傳進(jìn)度
Snipaste_2019-03-09_23-40-59.png
解決辦法:在beforeAvatarUpload return前
this.$ref.upload.abort()
可以中斷上傳
Snipaste_2019-03-09_23-41-14.png
文檔說clearFiles不能用 實(shí)測(cè)可用 為了穩(wěn)定 還是使用abort
-
上傳搞定,接下來就可以愉快的把鏈接給后端小伙伴存儲(chǔ)在數(shù)據(jù)庫(kù)使用了
后續(xù):
萬惡的產(chǎn)品還要加圖片上傳 而且加只能上傳一張的限制 文檔中說是使用limit 我們?cè)诮M件里使用limit=1 發(fā)現(xiàn)還是有上傳的按鈕
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">上傳到服務(wù)器</el-button> -->
</el-upload>
<style lang='less'>
.hide .el-upload--picture-card {
display: none;
}
</style>
這里我們操作不到按鈕 但是我們發(fā)現(xiàn)它有el-upload--picture-card這個(gè)class
Snipaste_2019-03-09_23-41-46.png
所以在el-upload 加個(gè)hide class :class="{hide:!isShowUpload}" 可以解決
注:在vue有個(gè)小問題,一般我們?cè)趕tyle里會(huì)寫scoped 上面寫法會(huì)不生效,需要去除scoped