vue上传图片到腾讯云和上传视频到云点播

最新推荐文章于 2024-07-30 08:51:24 发布

原创

最新推荐文章于 2024-07-30 08:51:24 发布 · 816 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

本文展示了如何使用Vue.js实现图片上传功能，并详细介绍了将视频上传至腾讯云点播的组件代码，涵盖了从前端到云端的完整流程。

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

上传图片组件代码（上传视频到云点播代码在下面）

<!--
  此文件是上传图片的公共组件
  父组件传过来的参数：
  一：promptText，图片上面的限制文字
  二：mostNum，最多上传几张
  三：imgSize，图片的建议尺寸
  四：imgUrlArr，需要提前展示的图片的链接数组
  要传给父组件的参数：
  一：getImgUrlId，每一张上传成功之后将图片id传给父组件
  二：delImg，删除图片的时候，将删除的这张图片的索引传给父组件
-->
<template>
  <div id="UploadImg" class="upload-file-box dialog-margintop" :class="{
    
    'pb20': masterGraph}">
    <div class="upload-img">
      <div style="font-size:12px;color:#9BAAB5">{
  
  {promptText}}</div>
      <el-button v-if="isShowAdd">
        <div class="add-img">
          <i class="el-icon el-icon-plus"></i>
        </div>
        <form action="" id="uploadForm">
          <input
            type="file"
            title=""
            name="uploads"
            id="uploads"
            accept="image/png, image/jpeg, image/jpg"
            multiple
            ref="dowloadImg"
            @change="uploadImg($event, 1)" />
        </form>
      </el-button>
      <el-button v-for="(item, index) in imgBaseUrlArr" :key="index">
        <img :src="item">
        <i v-if="masterGraph && isMasterGraph == imgIdArr[index]" class="master-btn" @click="setMasterGraph(index)">已是主图</i>
        <i v-else-if="masterGraph" class="master-btn" @click="setMasterGraph(index)">设为主图</i>
        <div class="mark-box">
          <i @click="delImgMsg(index)" class="el-icon el-icon-delete delete_img"></i>
          <i @click="seeImgMsg(index)" class="el-icon el-icon-zoom-in big_img"></i>
        </div>
      </el-button>
    </div>
    <!-- 剪切图片的弹窗 -->
    <el-dialog class="margin-top" title="图片剪裁" :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false">
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :fixedNumber="option.fixedNumber"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
          ></vue-cropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" class="info-btn" @click="dialogVisible = false">取 消</el-button>
        <el-button :disabled="btnDisabled" class="promary-btn" type="primary" @click="finish">{
  
  {dialogText}}</el-button>
      </div>
      <div class="preview-box">
        <section class="pre-item">
          <!-- <p>截图框大小</p> -->
          <div class="show-preview" :style="{
      
      'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">