Vue怎么實(shí)現(xiàn)自定義視頻和圖片上傳

今天小編給大家分享一下Vue怎么實(shí)現(xiàn)自定義視頻和圖片上傳的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

代碼如下：

<template>
  <div class="body">
    <span>測試</span>
    <span>視頻上傳</span>
    <!--  隱藏input框 -->
    <input  class="input-video" multiple type="file" accept="video/*"
      @change="uploadVideo11($event)">
    <div v-if="!videoUrl" class="no-bg wh">
      <el-progress class="progress-video" v-if="progress" type="circle" :percentage="videoUploadPercent"></el-progress>
      <div v-if="!progress" @click="uploadVideo">
        <span>點(diǎn)擊上傳視頻</span>
      </div>
    </div>
    <video v-else="videoUrl" class="wh" v-bind:src="videoUrl" controls="controls">
      您的瀏覽器不支持視頻播放
    </video>

    <span>-------------------------------------------------------------------------</span>

    <span>圖片上傳</span>
    <!-- <el-upload 
      :disabled="disabled"  刪除圖片后禁止彈窗彈出
      :action="this.$store.state.updataurl"  圖片上傳路徑
      :headers="headers"  請求頭
      :show-file-list="false" 文件列表
      :on-success="handleAvatarSuccess" 上傳成功回調(diào)
      :before-upload="beforeAvatarUpload" 上傳前回調(diào)
      :on-remove="handleRemove" 移除回調(diào)
      :on-progress="picUploadProcess" 上傳進(jìn)度條
      class="wh" > -->
    <el-upload :disabled="disabled" :action="this.$store.state.updataurl" :headers="headers" :show-file-list="false"
      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
      :on-progress="picUploadProcess" class="wh">
      <div v-if="cover" class="change-img wh">
        <!-- 地址拼接 -->
        <img :src="picUrl + cover" class="wh" />
        <div class="change">
          <span class="arr">更換</span>
          <span>&nbsp;|&nbsp;</span>
          <span class="arr" @click="handleRemove">刪除</span>
        </div>
      </div>
      <div v-else class="no-bg wh">
        <el-progress v-if="picFlag" type="circle" :percentage="picUploadPercent"></el-progress>
        <div v-else @click="disabled = false">
          <span class="note">點(diǎn)擊上傳封面圖片</span>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 視頻
      videoUrl: '', //視頻播放地址
      progress: false,
      videoUploadPercent: 0,

      // 圖片
      picUrl: this.$store.state.baseurl, //圖片前綴
      disabled: false,  //刪除圖片后禁止文件選擇彈窗彈出
      picFlag: false,   //進(jìn)度條顯示標(biāo)識
      picUploadPercent: 0,
      cover: ''
    }
  },
  computed: {
    headers() {
      return {
        Authorization: this.$store.getters.token || localStorage.getItem("token"),
        // soloFileName: 'video',   //和后端協(xié)商的默認(rèn)標(biāo)識
      };
    },
  },
  methods: {
    // 視頻上傳
    uploadVideo() {
      let ipFile = document.querySelector('.input-video')
      ipFile.click();
      this.videoUploadPercent = 0
    },
    async uploadVideo11(e) {
      // console.log("uploadVideo11", e)
      // console.log(e.target.files[0])
      this.progress = true
      let file = e.target.files[0]
      console.log("file", file)
      // multipart/form-data 格式
      let formData = new FormData()
      formData.append('file', file)
      let config = {
        //添加請求頭
        headers: {
          Authorization: this.$store.getters.token || localStorage.getItem("token"),
          "Content-Type": "multipart/form-data"
        },
        // 添加進(jìn)度條
        onUploadProgress: (progressEvent) => {
          this.videoUploadPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0)) * 1
          // console.log("this.videoUploadPercent", this.videoUploadPercent)
        }
      };
      axios.post(this.$store.state.videoUploadUrl, formData, config, { timeout: 1000 * 60 * 2 })	 //設(shè)置超時2分鐘
        .then(async (res) => {
          console.log("視頻上傳", res);
          this.videoUrl = res.data.data.playUrl  //端傳過來的視頻播放地址
          if (this.videoUrl) {
            this.progress = false
            this.$message({
              message: '上傳成功',
              type: 'success'
            });
          }
        }).catch(err => {
          this.progress = false
          console.log(err);
          this.$message.error({
            message: '上傳失敗'
          });
        })
    },

    // 圖片上傳
    handleAvatarSuccess: function (response, file, fileList) {
      if (file.response.code == 200) {
        this.cover = file.response.data.src;  //后端傳過來的圖片地址
        this.picFlag = false
        this.picUploadPercent = 0
      }
    },
    handleRemove(file) {
      this.cover = ''
      this.disabled = true
      // 1.獲取將要刪除圖片的臨時路徑
      // const filePath = file.response.data.tmp_path
      // // 2.從pics數(shù)組中，找到圖片對應(yīng)的索引值
      // const i = this.formData.pics.findIndex(x => x.pic === filePath)
      // // 3.調(diào)用splice方法，移除圖片信息
      // this.formData.splice(i, 1)
    },
    beforeAvatarUpload(file) {
      const isIMG = /^image\/(jpe?g|png|gif)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isIMG) {
        this.$message.error("上傳圖片只能是 JPG/PNG/GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上傳圖片大小不能超過 2MB!");
      }
      return isIMG && isLt2M;
    },
    picUploadProcess(event, file, fileList) {
      this.picFlag = true;
      this.picUploadPercent = file.percentage.toFixed(0) * 1;
    },
  }
}
</script>

<style lang="less" scoped>
// 進(jìn)度條
/deep/ .el-progress-circle {
  height: 100px !important;
  width: 100px !important;
}

.body {
  display: flex;
  flex-direction: column;
}

.no-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #000000;
  background-color: #FBFBFC;
  border-radius: 5px;
  cursor: pointer; //變小手
}

.wh {
  width: 320px;
  height: 180px;
  border-radius: 5px;
}

.change-img {
  position: relative;

  .change {
    opacity: 0;
    position: absolute;
    bottom: 8%;
    left: 35%;
    padding: 6px 11px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    color: #FFFFFF;
  }
}

.change-img:hover .change {
  opacity: 1;
}

.arr {
  cursor: default;
}
</style>

以上就是“Vue怎么實(shí)現(xiàn)自定義視頻和圖片上傳”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。