vue实现多文件上传

组件，upload.vue

<template>
  <div>
    <!-- 文件上传start -->
    <el-upload
      drag
      ref="upload"
      :limit="limitNum"
      :auto-upload="false"
      accept=".xlsx"
      :action="UploadUrl()"
      :before-upload="beforeUploadFile"
      :before-remove="beforeRemove"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :on-error="handleError"
      :filelist="fileList"
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且不超过10M</div>
    </el-upload>
    <!-- <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button size="small"  @click="dialogVisible = false">取消</el-button> -->
    <!-- 文件上传 end-->
  </div>
</template>
<script>
export default {
  props: ["Urldata"],
  data() {
    return {
      formselect: {},
      //文件上传
      limitNum: 100, // 上传excell时，同时允许上传的最大数
      fileList: [], // excel文件列表
      dialogVisible: true, //数据导入弹框显隐
      title: "", //弹框标题
      dialog: false, //抽屉弹框显隐
      // 表单
    };
  },
  created() {
    // console.log(this.Urldata);
    // this.GetProjectList()
  },
  mounted() {},
  methods: {
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file,fileList) {
    
      this.fileList = fileList;
      // this.$emit("getUrl", this.fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      // console.log("before upload");
      // console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
    
      this.$message.success("文件上传成功");
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message.error("文件上传失败");
    },
    UploadUrl: function () {
      // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return "";
    },
    beforeRemove(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile(Urldata) {
    
      if (this.fileList == "") {
        this.$message.warning("请上传文件");
      } else {
        var form = new FormData();
        this.fileList.forEach(function(item,index){
          form.append("files", item.raw);
        });
        //form.append("files",JSON.stringify( this.fileList));
        form.append("type", Urldata.type);
      
        // console.log(form);
        this.$axios({
          method: "post",
          url: Urldata.url,
          headers: {
            "Content-type": "multipart/form-data",
          },
          data: form,
        }).then(
          (res) => {
             this.$emit("getUrl", this.fileList);
          },
          (err) => {}
        );
      }
    },
    //文件上传关闭
    handleClosetwo(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  watch: {
    Urldata: {
      handler: function () {
        if(this.Urldata.rest==true){
          this.$refs.upload.clearFiles(); 
        }else{
          this.uploadFile(this.Urldata);
        }
        // this.$refs.upload.clearFiles(); 
        //do something
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
</style>

调用

           <uploadimg
              @getUrl="getUrl"
              :Urldata="Urldata"
              :limit="3"
            ></uploadimg>
//引用
import uploadimg from "../../components/Module/upload.vue";
//数据
data
  Urldata: {},
  //上传按钮
    upfile() {
      var api = this.$baseService.DataAdd;
      this.Urldata = { url: api, type: this.filetype };
    },
//重置按钮
 fileup() {
      this.Urldata = { rest: true };
    },
    //成功刷新
    getUrl(data1) {
      this.dialogfile = false;
      this.$message({
        message: "操作成功",
        type: "success",
      });
      this.getProjectList();
    },