上传视频组件

liweilong

2020-12-24 3fccf2450a3ed31ceca512551858f886b30c499d

上传视频组件

 src/components_simple/UploadSingleVideo.vue

New file
@@ -0,0 +1,119 @@
<template>
  <div>
    <el-upload
      ref="refUploadVideo"
      action="#"
      :before-upload="beforeUploadVideo"
      accept="video/mp4"
      :limit="1"
      :file-list="uploadVideos"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
      :http-request="reqUploadVideo"
      style="width: 200px"
    >
      <video
        v-if="uploadVideos.length"
        class="com-up-video"
        :src="uploadVideos[0].url"
        controls="controls"
      >您的浏览器不支持视频播放</video>
      <template v-else>
        <i class="el-icon-plus" />
        <span>选择视频</span>
      </template>

    </el-upload>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传视频预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadVideos',
    event: 'change'
  },
  props: {
    uploadVideos: {
      type: Array,
      default: () => {
        return []
      }
    },
    accept: {
      type: String,
      default: () => {
        return 'image/jpeg,image/jpg,image/gif,image/png'
      }
    }

  },

  data() {
    return {
      callback: null
    }
  },
  methods: {
    // 上传视频 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) === -1) {
        this.$message.error('必须是mp4文件')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    // 增加视频
    addUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除视频
    delUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },

    // 上传视频
    reqUploadVideo(res) {
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload?type=1',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'https://www.w3school.com.cn/i/movie.mp4'
          }
        }
      }, (inf) => {
        // 替换掉未上传的图片
        this.$emit('change', [{ name: '视频', url: inf.imgUrl, status: 'success' }])

        console.log('上传视频成功且结束')

        // 提交
        // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
        this.callback && this.callback(inf.imgUrl)
      })
    }
    // 上传视频 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>

<style>
.el-upload-list__item{
  transition: none;
}
</style>

 src/pages/demo/form.vue

@@ -32,23 +32,11 @@
          图片：<br><span>(668*164像素)</span>
        </span>
        <!-- 上传图片组件(单图) -->
        <el-upload
        <UploadSingleImg
          ref="refUploadImg"
          accept="image/jpeg,image/jpg,image/gif,image/png"
          :auto-upload="false"
          list-type="picture-card"
          :class="{disabled:uploadDisabled}"
          action="#"
          :limit="1"
          :file-list="mData.uploadImgs"
          :on-change="addUploadImg"
          :on-remove="delUploadImg"
          :http-request="uploadImg"
          :on-preview="uploadPreview"
          :before-upload="beforeUploadImg"
        >
          <i class="el-icon-plus" />
        </el-upload>
          v-model="mData.uploadImgs"
          @change.capture="$refs.refDialog.clearValidate()"
        />
      </el-form-item>
      <el-form-item label="是否上架：">
        <el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" />
@@ -75,10 +63,11 @@
<script>
import WangEnduit from '@/components/WangEnduit' // 富文本
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
import UploadSingleImg from '@/components_simple/UploadSingleImg'
import Area from '@/utils/area' // 地区选择
export default {
  name: 'DemoForm',
  components: { WangEnduit },
  components: { WangEnduit, UploadSingleImg },
  mixins: [
    mixin_upload
  ],
@@ -159,62 +148,14 @@
    },
    // 富文本相关

    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
      }
      return isImg
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.mData.uploadImgs = fileList
      this.$refs.couponForm.validateField('uploadImgs')
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.mData.uploadImgs = fileList
    },
    // 上传图片
    uploadImg(res) {
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图成功')
        this.$set(this.mData, 'imgUrl', inf.imgUrl)
        console.log('上传图结束')

        // 上传完图片
        this.submitReq()
      })
    },
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    submit() {
      this.$refs['couponForm'].validate(valid => {
        if (valid) {
          if (this.checkNeedUpload(this.mData.uploadImgs)) {
            console.log('开始上传图片')
            // 先上传图片，再提交
            this.$refs.refUploadImg.submit()
          } else {
            // 提交
          // 上传图片
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
            this.submitReq()
          }
          })
        }
      })
    },

 src/pages/system/admin.vue

@@ -85,7 +85,7 @@
    />

    <!-- 新增&编辑 -->
    <el-dialog :title="adminDialogData.type=='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body>
    <el-dialog :title="adminDialogData.type=='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body :before-close="hideDialog">
      <el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="adminDialogData.name" placeholder="请输入名称" />

 src/pages/system/banner.vue

@@ -64,24 +64,12 @@
          <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" />
        </el-form-item>
        <el-form-item ref="uploadFormItem" label="轮播图：" prop="uploadImgs">
          <!-- 上传图片组件(单图) -->
          <el-upload
          <!-- 上传图片组件(多图) -->
          <UploadSingleImg
            ref="refUploadImg"
            accept="image/jpeg,image/jpg,image/gif,image/png"
            :auto-upload="false"
            list-type="picture-card"
            :class="{disabled:uploadDisabled}"
            action="#"
            :limit="1"
            :file-list="dialogData.uploadImgs"
            :on-change="addUploadImg"
            :on-remove="delUploadImg"
            :http-request="uploadImg"
            :on-preview="uploadPreview"
            :before-upload="beforeUploadImg"
          >
            <i class="el-icon-plus" />
          </el-upload>
            v-model="dialogData.uploadImgs"
            @change.capture="$refs[formName].clearValidate()"
          />
        </el-form-item>
        <el-form-item label="跳转类型：" prop="jumpType">
          <el-select
@@ -130,8 +118,10 @@

import mixin_Upload from '@/mixins/upload.js'
import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项
import UploadSingleImg from '@/components_simple/UploadSingleImg'
export default {
  name: 'Equipment',
  components: { UploadSingleImg },
  mixins: [mixin_Upload, mixin_bannerOpts],
  data() {
    return {
@@ -192,66 +182,6 @@
    init() {
      this.getList()
    },

    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
      }
      return isImg
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.$refs.uploadFormItem.resetField()
      this.dialogData.uploadImgs = fileList
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.dialogData.uploadImgs = fileList
    },
    // 执行上传图
    runUploadImg(suc_cb) {
      if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
        this.$refs.refUploadImg.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传图
    uploadImg(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图片成功')

        // 替换掉未上传的图片
        this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
        this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
        this.$set(this.dialogData, 'imgUrl', inf.imgUrl)

        console.log('上传图片结束')

        // 提交
        this.submit(this.dialogData.type)
      })
    },
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    // 获取列表
    getList() {
@@ -351,7 +281,8 @@
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          // 上传图片
          this.runUploadImg(() => {
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
            this.submit(type)
          })
        }

 src/pages/system/roleEdit.vue

@@ -280,8 +280,8 @@
      // background: #999;
    }
    .el-icon-check{
      background: #409EFF;
      // background: #999;
      color: #409EFF;
      // color: #999;
    }
  }
}