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怎么实现自定义视频和图片上传的详细内容，更多关于Vue怎么实现自定义视频和图片上传的资料请关注九品源码其它相关文章！