Vue怎么实现自定义视频和图片上传

今天小编给大家分享一下Vue怎么实现自定义视频和图片上传的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

代码如下：

<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>点击上传视频</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" 上传成功回调
      :before-upload="beforeAvatarUpload" 上传前回调
      :on-remove="handleRemove" 移除回调
      :on-progress="picUploadProcess" 上传进度条
      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">点击上传封面图片</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,   //进度条显示标识
      picUploadPercent: 0,
      cover: ''
    }
  },
  computed: {
    headers() {
      return {
        Authorization: this.$store.getters.token || localStorage.getItem("token"),
        // soloFileName: 'video',   //和后端协商的默认标识
      };
    },
  },
  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"
        },
        // 添加进度条
        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 })	 //设置超时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数组中，找到图片对应的索引值
      // const i = this.formData.pics.findIndex(x => x.pic === filePath)
      // // 3.调用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>
// 进度条
/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怎么实现自定义视频和图片上传”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。