element的el-upload同时上传图片和视频(手动上传)

最新推荐文章于 2025-03-28 17:42:25 发布

絮絮/_叨叨

最新推荐文章于 2025-03-28 17:42:25 发布

阅读量4.3k

点赞数 6

文章标签： upload html vue elementui

本文链接：https://blog.csdn.net/qq_43039818/article/details/109877136

版权

本文介绍了一个基于Element UI的视频发布组件实现细节，包括如何验证上传的视频封面和视频文件格式及大小，确保用户输入的有效性，并通过表单验证机制完成视频的提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果图如下
在这里插入图片描述

  <el-dialog
        title="发布视频"
        :visible.sync="publishDialogVisible"
        width="80%"
        :before-close="handleClose"
        center
        v-dialogDrag
        :close-on-click-modal="false"
        top="6vh"
      >
        <el-form
          ref="uploadform"
          :model="uploadform"
          :rules="uploadformrules"
          label-width="auto"
          label-position="top"
        >
          <el-form-item
            label="视频标题："
            prop="name"
          >
            <el-input v-model="uploadform.name"></el-input>
          </el-form-item>
          <el-form-item
            label="视频封面："
            prop="imageFile"
          >
            <el-upload
              class="avatar-uploader"
              action=""
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              accept=".png,.jpg,.jpeg"
              :on-change="imageChange"
            >
              <img
                v-if="imgUrl!=''"
                class="avatar"
                :src="imgUrl"
                alt=""
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>

            </el-upload>
          </el-form-item>
          <el-form-item
            label="上传视频："
            prop="fileList"
          >
            <el-upload
              ref="uploadFile"
              name="files"
              action=""
              :on-change="fileChange"
              accept=".mp4"
              :auto-upload="false"
              :limit="1"
              :on-exceed="uploadExceed"
            >
              <el-button
                type="primary"
                style="background-color:rgb(9, 180, 197);color:#fff;border:0;"
              >选择视频</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="提交到审核">
            <el-button
              type="primary"
              style="background-color:rgb(9, 180, 197);color:#fff;border:0;"
              @click="publish('uploadform')"
            >
              提交
            </el-button>
          </el-form-item>

        </el-form>
      </el-dialog>

data部分

 uploadform: {
        name: "",
        imageFile: [],
        fileList: [],
      }, //上传视频的表单
      uploadformrules: {
        name: [{ required: true, message: "请输入视频标题", trigger: "blur" }],
        imageFile: [
          { required: true, message: "请选择视频封面", trigger: "change" },
        ],
        fileList: [
          { required: true, message: "请选择视频", trigger: "change" },
        ],
      },
      publishDialogVisible: false, //发布稿件是否可见
      imgUrl: "",

methods

这里重点说明几点，手动上传beforeupload函数不会生效，所以验证文件放在on-change里
在验证文件时我发现不符合要求的文件也会在列表中展示出来，因此使用clearFiles()清除不符合的文件列表
还有视频封面记得保证只有一张，如果用limit限制为1的话就无法切换视频封面（因此通过判断fileList的长度来解决）

//图片改变状态时
    imageChange(file, fileList) {
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg";
      if (!isImage) {
        return this.$message.error("上传只能是png,jpg,jpeg格式!");
      }
      if (fileList.length > 1) {
        //始终保证只有一张
        (this.uploadform.imageFile = []), (this.imgUrl = "");
      }
      this.imgUrl = URL.createObjectURL(file.raw);
      this.uploadform.imageFile = file;
    },

    //视频状态改变时
    fileChange(file, fileList) {
      const isMp4 = file.raw.type == "video/mp4";
      const isLt40M = file.raw.size / 1024 / 1024 < 40;
      if (!isMp4) {
        this.$refs.uploadFile.clearFiles();//这里很奇怪我调用输出绑定的uploadform.fileList发现长度是0但是列表还是会有文件显示,调用clearFiles方法后就可以清除错误列表
        return this.$message.error("上传只能是mp4格式！");
      }
      if (!isLt40M) {
       this.$refs.uploadFile.clearFiles();
        return this.$message.error("上传视频只能小于40M！");
      }
      
      this.uploadform.fileList = file;
    },
   //限制文件一次只能上传一个
    uploadExceed() {
      this.$message.error("一次只能上传一个文件！");
    },
    //用户投稿
    publish(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let wfForm = new FormData();
          wfForm.append("title", this.uploadform.name);
          wfForm.append("cover", this.uploadform.imageFile.raw);
          wfForm.append("file1", this.uploadform.fileList.raw);
          publishVideo(wfForm).then((res) => {
            if (res.code != 200) return this.$message.error("投稿失败！");
            this.$message.success("投稿宣传视频成功！");
            this.$refs[formName].resetFields();
            this.$refs.upload.clearFiles();
            this.imgUrl = "";
            this.getlist();
            this.publishDialogVisible = false;
          });
        } else {
          this.$message.error("请填写必备的表单项");
          return false;
        }
      });
    },

css

<style lang="">
.avatar-uploader .el-upload {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: rgb(9, 180, 197);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>