elementui upload组件 上传视频到七牛云

elementui upload组件 上传视频到七牛云

• 首先，需要获取Token，需要后端小伙伴配合

后端文档：https://developer.qiniu.com/kodo/sdk/1239/java

后端小伙伴写好了接口，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

elementui文档

 
    选取文件

上传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--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