elementui手动上传（覆盖上传）

目录

一.视频上传

        1.代码及注解

        2.视频预览

二.文件上传

        1.代码及注解

三、自动上传注意事项

---

一.视频上传

        1.代码及注解

                 html代码

                        我用的地方是在表单里，componentForm就是我所绑定的表单名（如若不需要可以自己改）

<el-upload
    ref="videoUpload"//给上传文件绑定一个ref必要时好清空上传文件数组
    class="upload-demo"
    :action="baseUrl+'/api/file'"//上传地址（主动上传这里是写上传的接口地址）
    :on-success="videoSuccess"//上传成功时候的事件
    :on-change="videoValidation"//文件状态改变事件，文件状态，添加文件、上传成功和上传失败时都会被调用
    :auto-upload="false"//自动上传关闭
    :show-file-list="false"//不展示文件列表，样式自定义
    accept=".mp4"//粗略筛选文件类型
    :file-list="videoList"//视频列表
>
    <el-button slot="trigger" size="small" class="el-icon-upload">选取</el-button>
    <div v-show="componentForm.play_name">{{ componentForm.play_name }}</div>
</el-upload>

script代码

data(){
    return{
         menuKey: 1, // 用来强制刷新（视频预览）
         baseUrl: process.env.VUE_APP_BASE_API,//基础url(自定义),
         componentForm: {},//表单（自定义）
         componentFormRules: {},//表单规则（自定义）
         videoList:[],//表单列表（必要）
}
},
methods:{
    videoSuccess(res, file) {
            ++this.menuKey//用于视频预览时候的强制刷新（必要）
            this.$set(this.componentForm, 'play_url', res.data)//若data中数据类型较为复杂，视图无法同步更新，则用此方法强制刷新，详情请看本章对应目录（自定义）
            update(this.componentForm).then(res => {
                if (res.success) {
                    this.getParams()
                    this.isEdit = false
                    this.hasVideo = false
                    this.hasCourseWare = false
                }
            })//这方向自定义，我这里是调用自己接口
            this.$refs.videoUpload.clearFiles()//上传成功之后，清空已上传的文件列表,videoUpload为绑定的ref值（必要）
        },
    videoValidation(file, fileList) {
            //此部分为上传文件时候的限制文件类型及其大小，上面的accept属性为粗略定义，此处可自定义复杂操作
            const isMp4 = file.raw.type === 'video/mp4'
            const isLt300M = file.size / 1024 / 1024 < 300
            if (!isMp4) {
                this.$message.error('视频只能是mp4格式!')
                return false
            }
            if (!isLt300M) {
                this.$message.error('上传文件大小不能超过300MB!')
                return false
            }
            //此部分为覆盖上传操作

            if (fileList.length > 0) {
                this.videoList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
            }
            //此部分为获取上传视频长度
            const url = URL.createObjectURL(file.raw)
            var audioElement = new Audio(url)
            audioElement.addEventListener('loadedmetadata', () => {
                this.videoList[0].videoTime = Math.round(audioElement.duration * 100) / 100 // videoTime 就是当前视频长度即保留两位小数
                this.$set(this.componentForm, 'play_length', String(this.videoList[0].videoTime))
            })
            this.$set(this.componentForm, 'play_name', this.videoList[0].name)
            this.hasVideo = true
        },

}

        2.视频预览

<video v-if="componentForm.play_url" :key="menuKey" :src="baseUrl+componentForm.play_url" width="100%" controls="controls" />
//menuKey为了视频的正常播放，强制刷新
//:src绑定的是url链接（自定义）

二.文件上传

        1.代码及注解

                html代码

                      我用的地方是在表单里，componentForm就是我所绑定的表单名（如若不需要可以自己改）

<el-upload
    ref="courseWareUpload"//绑定ref属性方便删除文件列表
    class="upload-demo"
    :action="baseUrl+'/api/file'"//上传文件接口（自定义）
    accept=".doc,.pdf,.docx"//粗略的限制文件类型
    :on-change="courseWareValidation"//文件状态发生变化时候触发事件
    :on-success="courseWareSuccess"//文件上传成功时候触发事件
    :auto-upload="false"//取消自动上传
    :show-file-list="false"//不展示文件列表（方便自定义展示）
    :file-list="courseWareList"//文件列表
>
    <el-button slot="trigger" size="small" class="el-icon-upload">选取</el-button>
</el-upload>

script代码

data(){
    return{
         baseUrl: process.env.VUE_APP_BASE_API,//基础url(自定义),
         componentForm: {},//表单（自定义）
         componentFormRules: {},//表单规则（自定义）
         courseWareList: [],//表单列表（必要）
}
},
methods:{
    courseWareSuccess(res, file) {
            //此处自定义
            this.$set(this.componentForm, 'courseware_url', res.data)
            this.$refs.courseWareUpload.clearFiles()//（必要）清空课件上传列表
        },
    courseWareValidation(file, fileList) {
            //对文件进行更加详细的筛选
            const fileName = file.name
            const fileType = fileName.substring(fileName.lastIndexOf('.'))
            if (!fileType === '.pdf' || !fileType === '.doc' || !fileType === '.docx') {
                this.$message.error('文件格式不对!')
                return false
            }
            //覆盖上传操作
            if (fileList.length > 0) {
                this.courseWareList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
            }
            //自定义部分（后续操作）
            this.$set(this.componentForm, 'courseware_name', this.courseWareList[0].name)
            this.hasCourseWare = true
        },

}

三、自动上传注意事项

        1.auto-upload设置为false的时候，before-upload事件是不起作用的，需要使用on-change事件来代替