vue上传视频

1.页面

 <!-- 视频介绍 -->
              <div class="list_video">
                <el-form-item
                  class="all_item flexed align-item-starts uodateContent"
                >
                  <div class="video_label">视频介绍：</div>
                  <div class="flexed align-items-end">
                    <div class="video_content">
                    //上传视频
                      <el-upload
                        class="avatar-uploade item_video"
                        action=""
                        :show-file-list="false"
                        :http-request="
                          (file) => httpRequestUpload(file)
                        "
                        @change="onChangeVideo"
                      >
                        <!-- userResume.videoResume -->
                        //显示视频
                        <video
                          v-if="userResume.videoResume"
                          :src="store.pictureUrl + userResume.videoResume"
                          class="video"
                        ></video>
                        <el-icon
                          v-else
                          class="video-uploader-icon"
                          style="background: rgba(247, 248, 250, 1)"
                        >
                          <Plus />
                        </el-icon>
                        <div class="flexed direction-coloumn video_replenish">
                          <div
                            class="flexed align-items-center"
                            style="color: #c30d23"
                          >
                            <!-- 编辑， -->
                            <el-icon :size="16">
                              <Edit />
                            </el-icon>
                            <div class="edit" style="margin-left: 2px">
                              编辑
                            </div>
                          </div>
                          <span>视频最大可上传：200M</span>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                </el-form-item>
              </div>

2.页面显示

3.js

 // 改变个人视频介绍 userResume.value.videoResume双向绑定视频地址
    const onChangeVideo = () => {
        userResume.value.videoResume = store.userVideo;
    };

// 视频上传函数
    const httpRequestUpload = async (params) => {
    const file = params.file;
    // 获取后缀名
    // const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    // 判断是否符合文件类型需求
    const isLtType = [
        "video/mp4",
        "video/ogg",
        "video/flv",
        "video/avi",
        "video/wmv",
        "video/rmvb",
        "video/mov",
    ];
    if (file.size / 1024 / 1024 > 200) {
        ElMessage.error("视频最大可上传：200M");
        return false;
    } else if (isLtType.indexOf(file.type) == -1) {
        ElMessage.error(
            "错误的视频上传格式，请上传mp4、ogg、flv、avi、wmv、rmvb、mov格式文件"
        );
        return false;
    } else {
        let requireParameter = {
            fileNames: [file.name],
            fileType: "VIDEO",
        };
        await uploadFile(requireParameter).then(async (res) => {
            await upDateOss(res, file, "Video")
                .then((ossRes) => {
                    if (res.code == 200) {
                        store.saveUserVideo(ossRes.keyValue);
                        ElMessage.success("个人简介视频上传成功");
                        return false;
                    } else {
                        ElMessage.error(res.message);
                    }
                })
                .catch((error) => {
                    ElMessage.error(error.message);
                });
        });
    }
};

// 上传视频
export function upDateOss(res, file) {
  let keyValue = res.data.dirs[0];
  let formData = new FormData();
  formData.append('OSSAccessKeyId', res.data.accessId) // //accessKeyId
  formData.append('policy', res.data.policy) // policy
  formData.append('signature', res.data.signature) //签名
  formData.append('key', res.data.dirs[0]) // 文件名称
  formData.append('file', file.file ? file.file : file, file.file ? file.file.name : file.name) // 如果是base64文件，那么直接把base64字符串转成base64
  return new Promise((resolve, reject) => {
    fetchPost(res.data.host, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
    }).then((rep) => {
      store.saveUserVideo();
      resolve({
        rep,
        keyValue
      })
    }).catch((err) => {
      reject(err)
    })
  })
}
// 文件上传接口
export function uploadFile(parameter) {
  return fetchPost('common/material/v1/signature', parameter)
}