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文档

<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 文档地址

• 上传在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错误

怀疑是异步搞得鬼

• 改为按钮点击才上传到七牛云

auto-upload:false
submitUpload() {
    this.$refs.upload.submit()
},
复制代码

仍是出问题 怀疑是token慢了 在页面一加载的时候获取token 仍是不对

查了半天终于发现 必定要在data写form //this is !important

• 基本完成，可是还有点小瑕疵

上传若是不符合要求 还会显示上传进度

解决办法:在beforeAvatarUpload return前 this.$ref.upload.abort() 能够中断上传

文档说clearFiles不能用 实测可用 为了稳定 仍是使用abort

• 上传搞定，接下来就能够愉快的把连接给后端小伙伴存储在数据库使用了

后续：

万恶的产品还要加图片上传 并且加只能上传一张的限制 文档中说是使用limit 咱们在组件里使用limit=1 发现仍是有上传的按钮

这里咱们经过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

因此在el-upload 加个hide class :class="{hide:!isShowUpload}" 能够解决

注：在vue有个小问题，通常咱们在style里会写scoped 上面写法会不生效，须要去除scoped