elementui 上传图片和视频文件

elementui有个上传文件的标签

上传图片(一张主图)：

<el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeUploadBanner" action="https://jsonplaceholder.typicode.com/posts/">
    <el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334">上传图片</el-button>
    <img v-if="goodsFPicture" :src="goodsFPicture" class="log" style="margin-left: 20px">
</el-upload>
<el-button @click="delFPic" type="primary" v-if="goodsFPicture">删除</el-button>

上传视频

<el-upload class="avatar-uploader el-upload--text"
    action="https://jsonplaceholder.typicode.com/posts/" 
    :show-file-list="false"
    :on-success="videoSuccess"  
    :before-upload="beforevideoUpload" 
    > 
    <el-button style="margin-left:105px;width:130px;padding:10px;color:#FEB334;border-color:#FEB334">上传视频</el-button>
    <span>视频大小在45秒之内</span>
    <div v-if="goodsFVideo" style="width:320px;">
        <video width="320" height="240" controls>
            <source :src="goodsFVideo" type="video/mp4">
        </video>
    </div>
</el-upload>
<el-button @click="delVideo" type="primary" v-if="goodsFVideo">删除</el-button>

上传多张图片:

// limit是指最多上传几个文件
<el-upload multiple :limit="6" :on-success="handleAvatarSuccess1" :before-upload="beforeUploadBanner" action="/mall/main/addImage/35">
    <el-button style="width:130px;padding:10px;color:#FEB334;border-color:#FEB334">上传图片</el-button>
    <img v-for="(item,i) of goodsSPicture" :src="item" class="log" :key="i" style="margin-left:20px">
</el-upload> 

因为我要实现的是主图和视频只能二选其一，所以给视频和主图都加了个删除的按钮

参数的含义：

action : 要上传的地址
show-file-list : 是否显示上传文件的列表
on-success : 文件上传成功之后的钩子
before-upload : 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传

javascript代码

data (){
    return {
        goodsFPicture: '',
        goodsFVideo: '',
        goodsSPicture: [],
        form: {
            goodsFPicture: '',
            goodsFVideo: '',
            goodsSPicture: [],
        }
    }
}
beforeUploadBanner(file){
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
    }else if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
    }
    return isJPG || isPNG && isLt2M;
},
handleAvatarSuccess(res, path, httpPath) {
    if(this.goodsFVideo != ""){
        this.$message({
            type: 'warning',
            message: '主图和视频只能二选其一'
        })
        this.goodsFPicture = "";
        this.form.goodsFPicture = ""
        return
    }else{
        console.log(res)
        this.goodsFPicture = res.data.httpPath  //httpPath是带http的全路径，用于页面展示
        this.form.goodsFPicture = res.data.path //我这里的path是图片的绝对路径，用于传给后端
    } 
},
//上传前回调
beforevideoUpload(file) {
    if(this.goodsFPicture !==''){
        return
    }else{
        file.type;
        const isJPG = file.type === "video/mp4";
        const isMOV = file.type === "video/quicktime";
        const isAVI = file.type === "video/avi";
        const is3GP = file.type === "video/3gp";
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG && !isAVI && !isMOV && !is3GP) {
            this.$message.error("上传视频只能是 mp4、mov、avi、3GP 格式!");
        }
        if (!isLt2M) {
            this.$message.error("上传视频大小不能超过 100MB!");
        }
    return isJPG || isAVI || isMOV || (is3GP && isLt2M);
    } 
},
videoSuccess(res, file) {
    if(this.goodsFPicture !==''){
        this.$message({
            type: 'warning',
            message: '主图和视频只能二选其一'
        })
        this.goodsFVideo = "";
        this.form.goodsFVideo=""
        return
    }else{
        var that = this;
        if (res.code == "NACK") {
            that.$message({
                message: res.message,
                type: "info"
            });
        } else {
            this.goodsFVideo = res.data.httpPath
            this.form.goodsFVideo = res.data.path;
            // this.savevideo();
        }
    }
},
handleAvatarSuccess1(res,path,httpPath){
    if(res) {
        this.goodsSPicture.push(res.data.httpPath)
        this.form.goodsSPicture.push(res.data.path)
    }
}