视频发布封面

xiangpei

2025-06-03 d92ead2d480779d3226e898c5827271795e21562

 pages/tabbar/video/video.vue

@@ -16,7 +16,7 @@
          :poster="videoInfo.cover || ''"
        ></video>
      <view class="progress-box">
         <progress style="width: 100%;" :percent="videoUploadProgress" show-info stroke-width="6" :active="true" active-color="#ff573e" />
         <progress style="width: 100%;" :percent="videoUploadProgress" active-mode="forwards" show-info stroke-width="6" :active="true" active-color="#ff573e" />
      </view>
        <view class="video-actions">
          <u-button type="error" size="mini" @click="reUpload">重新上传</u-button>
@@ -171,13 +171,20 @@
</template>

<script>
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
import UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
import MyTag from "@/components/my-tag.vue"
import { getSTSToken } from "@/api/common.js";
import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
import { publish } from "@/api/video.js";
import { getRecommendTag3 } from "@/api/video-tag.js";
import { getFileKey } from "@/utils/file.js";
export default {
  components: {MyTag},
  components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup},
  data() {
    return {
     cosClient: null,
@@ -200,6 +207,7 @@
      id: '',
        title: '',
      videoFileKey: '',
      videoDuration: 0,
      videoFit: 'cover',
        goodsId: '',
        tags: [],
@@ -253,7 +261,7 @@
  },
  methods: {
     // 获取推荐标签
     getRecommendTags(type) {
     async getRecommendTags(type) {
        const params = {
           tagName: this.tagInput.trim(),
           searchType: type
@@ -267,7 +275,6 @@
        console.log("执行了");
        // 调用后端获取sts临时访问凭证
        getSTSToken().then(res => {
           console.log(res, "sts结构");
           const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
           // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
           
@@ -301,20 +308,21 @@
         if(fileName.indexOf('%') > -1) {
            fileName = decodeURIComponent(fileName);
         }
          const fileKey = getFileKey(fileName);
        this.videoInfo = {
         url: res.tempFilePath,
          fileKey: fileKey,
          fileType: fileKey.split('/')[0],
          fileSize: res.size,
          originalFileName: fileName,
          cover: ''
        };
        this.formData.videoFileKey = fileKey;
        // 判断视频的填充模式
        this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
         const fileKey = getFileKey(fileName);
         this.videoInfo = {
          url: res.tempFilePath,
          fileKey: fileKey,
          fileType: fileKey.split('/')[0],
          fileSize: res.size,
          originalFileName: fileName,
          cover: ''
         };
         this.formData.videoFileKey = fileKey;
         this.formData.videoDuration = res.duration;
         // 判断视频的填充模式
         this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
        
        this.cosClient.uploadFile({
         this.cosClient.uploadFile({
              Bucket: this.bucket,
              Region: this.region,
              Key: fileKey,
@@ -381,7 +389,30 @@
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
        let fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
        // 处理安卓可能的URI编码
        if(fileName.indexOf('%') > -1) {
            fileName = decodeURIComponent(fileName);
        }
        const fileKey = getFileKey(fileName);
          this.videoInfo.cover = res.tempFilePaths[0];
        this.cosClient.uploadFile({
             Bucket: this.bucket,
             Region: this.region,
             Key: fileKey,
             FilePath: res.tempFilePaths[0], 
             SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
         }, (err, data) => {
             if (err) {
               console.log('上传失败', err);
             } else {
               // 获取封面的访问地址
               getFilePreviewUrl(fileKey).then(res => {
               this.videoInfo.cover = res.data.data
               this.formData.cover = fileKey
               })
             }
         });
        }
      });
    },
@@ -489,6 +520,7 @@
             title: '',
            videoFileKey: '',
            videoFit: 'cover',
            videoDuration: 0,
             goodsId: '',
             tags: [],
             fileInfo: {}