Vue封装上传图片和视频的组件

首先下载依赖：

cnpm i -S vue-uuid ali-oss

图片和视频字段都是数组类型，保证可以上传多个文件。

UploadImageVideo：

<!--UploadImageVideo 分片上传    -->
<template>
  <div class="UploadImageVideo">
    <el-upload
      action
      :on-change="handleChange"
      :on-remove="handleRemove"
      :limit="limitFileNumber"
      :on-exceed="handleExceed"
      :file-list="_fileList"
      :http-request="handleHttpRequest"
      :before-upload="handleBeforeUpload"
      :multiple="isMultiple"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <div slot="tip" class="el-upload__tip">{
  { tip }}</div>
    </el-upload>

    <el-dialog
      title="上传进度"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
    </el-dialog>
  </div>
</template>

<script>
import { uuid } from "vue-uuid";
const OSS = require("ali-oss");

export default {
  name: "",
  components: {},
  props: {
    region: {
      type: String,
      default: "oss-cn-chengdu"
    },
    accessKeyId: {
      type: String,
      default: "xxx"
    },
    accessKeySecret: {
      type: String,
      default: "xxx"
    },
    //存储位置
    bucket: {
      type: String,
      required: true
    },
    currentUrls: {
      type: Array,
      default: () => [],
      required: true
    },
    //限制上传文件数量
    limitFileNumber: {
      type: Number,
      default: 1
    },
    //是否支持多选
    isMultiple: {
      type: Boolean,
      default: false
    },
    //文件格式
    fileType: {
      type: String,
      default: ""
    },
    //提示
    tip: {
      type: String
    }
  },
  data() {
    return {
      client: new OSS({
        region: this.region,
        accessKeyId: this.accessKeyId,
        accessKeySecret: this.accessKeySecret,
        bucket: this.bucket
      }),
      percentage: 0,
      dialogTableVisible: false,
      fileList: []
    };
  },
  computed: {
    //注意：计算属性里面慎用console.log()来打印，因为有可能打印的变量是依赖某个属性而出现该计算属性重复调用！！！！！！
    _fileList() {
      const arr = [];
      //一定要this.currentUrls判断一下是否非空，否则要报错
      if (this.currentUrls.length !== 0) {
        for (const item of this.currentUrls) {
          let { pathname } = new URL(item);
          arr.push({ name: decodeURIComponent(pathname), url: item });
        }
      }

      this.fileList = arr; //这行代码很重要！！
      return arr;
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limitFileNumber} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

    //注意：为了让自定义上传handleHttpRequest生效，需满足：
    // 1、设置:auto-upload='true'或者不写这个属性，因为它默认为true  2、设置action='#'或者直接写action
    handleHttpRequest(file) {
      //虽然没有内容，但是这个函数不能少！
    },
    //注意：自定义上传handleHttpRequest必须要生效，才会触发before-upload钩子函数
    handleBeforeUpload(file) {
      if (this.fileType == "image") {
        let { type, size, name } = file;
        let isJPEG = type === "image/jpeg";
        let isJPG = type === "image/jpg";
        let isPNG = type === "image/png";
        let isLt5M = size / 1024 / 1024 < 5;
        if (!isJPEG && !isJPG && !isPNG) {
          this.$message.error("上传图片只能是 JPEG/JPG/PNG  格式!");
          return false;
        }
        if (!isLt5M) {
          this.$message.error("单张图片大小不能超过 5MB!");
          return false;
        }
      }
      if (this.fileType == "video") {
        let { type, size, name } = file;
        let isMP4 = type === "video/mp4";
        let isLt50M = size / 1024 / 1024 < 50;
        if