封面必传问题

zxl

2025-08-13 934654b44fb2670a7ce08aafa3d1d85fe783ae26

 manager/src/views/video/VideoList.vue

@@ -115,10 +115,25 @@
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="24" v-show="uploadVideoForm.videoFileKey && !uploadVideoForm.coverUrl">
              <FormItem label="上传封面" prop="coverUrl" :label-width="80">
                <Upload
                  :multiple="true"
                  :before-upload="upLoadImagCover"
                  accept="image/*"
                  action=""
                >
                  <Button icon="ios-cloud-upload-outline">选择封面</Button>
                </Upload>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24">
            <Col span="12" v-if="uploadVideoForm.videoFileKey">
              <FormItem :labelWidth="80">
                <Button @click="reloadVideo" type="primary">重新上传视频</Button>
                <Button type="primary" @click="clearCoverImage" v-show="uploadVideoForm.coverUrl" style="margin-left: 20px">重新上传封面</Button>
              </FormItem>
            </Col>
          </Row>
@@ -474,9 +489,15 @@
import {getFileKey} from "@/utils/file";
import vuedraggable from "vuedraggable";
import vueQr from "vue-qr";
import uploadImage from "../../components/editor/upload-image.vue";

export default {
  name: "VideoList",
  computed: {
    uploadImage() {
      return uploadImage
    }
  },
  components: {vuedraggable, Editor, GoodsExpandRow, "vue-qr": vueQr},
  watch: {
    'uploadVideoForm.videoContentType'(newValue, oldValue) {
@@ -532,6 +553,8 @@
      videoProgress: 0,
      upLoadVideoShow: false,
      uploadVideoForm: {
        coverUrl:null,
        showCoverUrl:null,
        id: '',
        title: '',
        cover: "",
@@ -768,19 +791,22 @@
        }
      });
      this.uploadVideoForm = row
      console.log("打印值",this.uploadVideoForm)
      this.uploadVideoForm.fileInfo= {};
      this.uploadVideoForm.videoImgs = JSON.parse(this.uploadVideoForm.videoImgs)
      const sts = await getSts();
      if (this.uploadVideoForm.videoContentType === 'video') {
        this.uploadVideoForm.showVideoUrl = sts.data.endpoint + '/' + this.uploadVideoForm.videoFileKey

        if (this.uploadVideoForm.coverUrl !== '' && this.uploadVideoForm.coverUrl != null) {
          this.uploadVideoForm.showCoverUrl = sts.data.endpoint + '/' + this.uploadVideoForm.coverUrl
          this.uploadVideoForm.showCoverUrl =  this.uploadVideoForm.coverUrl
        }
      } else if (this.uploadVideoForm.videoContentType === 'img') {
        this.uploadVideoForm.showListImages = this.uploadVideoForm.videoImgs.map(item => {
          return sts.data.endpoint + '/' + item
        })
      }
      console.log("处理过后",this.uploadVideoForm)

      this.searchGoodsList();
    },
@@ -833,6 +859,11 @@
      this.upLoadVideoShow = false;
    },
    submitVideoUpload() {
      console.log(this.uploadVideoForm.coverUrl)
      if (this.uploadVideoForm.coverUrl === null || this.uploadVideoForm.coverUrl === undefined) {
        this.$Message.error('标题不能为空');
        return;
      }
      this.uploadVideoForm.goodsList = this.uploadVideoForm.goodsList.filter(item => {
        return item.goodsNum > 0;
      })
@@ -891,13 +922,62 @@
      this.imgName = name;
      this.visible = true;
    },
    async upLoadImagCover(file) {
      try {
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。cover
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        this.$set(this.uploadVideoForm, 'coverUrl', fileKey);
        this.$set(this.uploadVideoForm, 'showCoverUrl', `${sts.data.endpoint}/${fileKey}`);
        this.uploadVideoForm.cover = fileKey;
        if (this.$refs.videoInfo) {
          this.$refs.videoInfo.poster = this.uploadVideoForm.showCoverUrl;
          this.$refs.videoInfo.load(); // 重新加载视频
        }
        console.log(this.uploadVideoForm)

      } catch (e) {
        console.log("上传失败", upData)
      } finally {

      }
      return false;
    },
    clearCoverImage(){
      this.$set(this.uploadVideoForm, 'coverUrl', '');
      this.$set(this.uploadVideoForm, 'showCoverUrl', '');
      this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
    },

    async upLoadImg(file) {
      if (this.uploadVideoForm.videoImgs >= 5) {
        this.$Message.error("图片上传不能超过5个");
        return;
      }
      try {
        // this.upLoadVideoLoading = true;
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
@@ -934,7 +1014,6 @@
        console.log("上传失败", upData)
        return false;
      } finally {
        // this.upLoadVideoLoading = false;

      }
      return false;
@@ -999,7 +1078,7 @@
          this.uploadVideoForm.showVideoUrl = sts.data.endpoint + "/" + fileKey;
        })
        console.log("上传成功", upData)
        const duration = this.$refs.healthVideoInfo.duration;
        const duration = this.$refs.videoInfo.duration;
        console.log('-测试获取时间信息---------------->', duration);
      } catch (e) {
        console.log("上传失败", upData)