uploadFolder.vue

<template>
  <el-form enctype="multipart/form-data">
    选择多文件：
    <input type="file" name="files" multiple="multiple" @change="getFiles($event)" />
    <br />选择文件夹：
    <input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory />
    <br />
    <ul class="el-upload-list el-upload-list--text">
      <li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i">
        {{item.name}}
        <span>
          <el-button size="mini" type="text">
            <i @click="remove(item)" class="el-icon-close"></i>
          </el-button>
        </span>
      </li>
    </ul>

    <el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button>
  </el-form>
</template>

<script>
import axios from "axios";
export default {
  name: "UploadFileVue",
   props:{
    fileList:{
      type:Array,
      default:[]
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      files: [
        
      ]
    };
  },
  watch: {
    fileList(newName, oldName) {
      console.log(newName)
      this.files = newName
      // ...
    }
  },
  computed: {
    headers() {
      return {
        Authorization: localStorage.getItem("backToken") || ""
      };
    }
  },
  
  methods: {
    remove(data) {
      const children = this.files;
      const index = children.findIndex(d => d.name === data.name);
      children.splice(index, 1);
      console.log(this.files,'111')
      this.$emit("videoList", this.files.map(item=>item.id));
    },
    getFiles: function(event) {
      console.log(event);
      var files = event.target.files;
      for (var i = 0; i < files.length; i++) {
        this.files.push(files[i]);
      }
      console.log(this.files, "--");
    },
    upload: function() {
        const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      console.log(this.files);
      var formData = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        formData.append("file", this.files[i]);
      }
      console.log(formData);
      let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/video/content/upload",
            authType: this.backToken
          },
          formData
        )
        .then(res => {
           loading.close();
          let resData = res.data;
          console.log(res);
          if (resData.resultCode == "200") {
            _this.$message.success("上传成功！");
            const data = resData.data.fileList;
            let newArray = data.map((item) => item.id);
            let editArray =[]
            if(this.files.length){
              editArray = this.files.map(item=>item.id)
            }
            this.$emit("videoList", [...newArray,...editArray]);
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });
    }
  }
};
</script>

<style>
</style>