vue 上传csv文件

index---------主页面（图1）

form-----------子页面（图2）

index.vue

 /** 重点！！！！

     * 获取表单组件传递的信息，传给后端接口

     * @param {从form表单传递的数据} datas

     * Files_Operation 接口名

     */

    GetCondition(datas) {

      const param = datas;

      this.test = datas.FileUrl; //cs

      //获取表单组件后，判断是新增/修改

      if (this.dialogTitle.search("上传") != -1) {

        //调用新增方法

        const formData = new FormData();

        formData.append("ID", param.ID);

        formData.append("FileName", param.FileName); //视频名称

        formData.append("FileType", param.FileType); //车辆类型

        formData.append("FileUrl", param.FileUrl); //序号

        formData.append("SortID", param.SortID); //序号

        console.log("给接口传参==", formData);

        this.$luleApi.Files_Operation(formData).then((res) => {

          console.log("res==", res);

          if (res.data.code == 200) {

            this.$message({

              message: "上传成功",

              type: "success",

            });

          } else {

            return;

          }

          this.$nextTick(() => {

            this.dialogVisible = false; //弹框关闭

            let param = { EquipmentType: this.EquipmentType };

            this.getTabledata(param); //刷新页面刷新数据

          });

        });

      }

    },

 form.vue 

<template>
  <div class="DictForm">
    <el-form
      ref="newFrom"
      :form="form"
      :model="newFrom"
      :rules="rules"
      label-width="100px"
      style="padding-left: 7px"
    >
      <el-form-item label="装备类型">
        <el-radio-group v-model="newFrom.FileType">
          <el-radio
            label="1"
            v-model="newFrom.EquipmentType"
          >油泵车</el-radio>
          <el-radio
            label="2"
            v-model="newFrom.EquipmentType"
          >电源车</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="文件名称"
        prop="FileName"
      >
        <el-input
          v-model="newFrom.FileName"
          placeholder="请上传文件"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="上传文件">
        <!-- accept 限制上传类型 -->
        <el-upload
          ref="fileUpload"
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :file-list="fileListUpload"
          accept=".csv,.txt"
          :on-exceed="handleExceedVisio"
          :auto-upload="false"
        >
          <el-button
            size="small"
            type="primary"
          >点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="排序"
        prop="SortID"
      >
        <el-input
          v-model="newFrom.SortID"
          type="number"
          min="0"
          placeholder="请输入序号"
          @input="changeInput(newFrom.SortID)"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 100%;margin:0">
        <div class="footer-btn">

          <el-button @click="onclose()"><el-icon>
              <FolderRemove />
            </el-icon>&ensp; 清 空</el-button>
          <el-button
            type="primary"
            @click="onSubmit('newFrom')"
          ><el-icon>
              <Search />
            </el-icon>&ensp;提 交</el-button>
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["form", "formID", "partend"],
  data() {
    return {
      fileListUpload: [],
      newFrom: {
        ID: "",
        ParentId: "",
        FileName: "1",
        FileType: "",
        FileUrl: "",
        FullName: "",
        FullPath: "",
        SortID: "",
      },
      rules: {
        FileName: [
          {
            required: true,
            message: "请上传文件",
            trigger: ["blur", "change"],
          },
        ],
        SortID: [
          {
            required: true,
            message: "请输入序号",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    if (JSON.stringify(this.form) == "{}") {
      this.newFrom = {};
    } else {
      this.newFrom = this.form;
    }
  },
  watch: {
    form(newVal, oldVal) {
      if (newVal && newVal.length == 0) {
        this.newFrom = {};
      } else {
        this.newFrom = newVal;
      }
    },

    partend: {
      deep: true,
      immediate: true,
      handler(n, o) {
        this.partendData = n;
      },
    },
  },
  mounted() {},

  methods: {
    //正则表达，判断数字
    changeInput(value) {
      this.newFrom.SortID = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, "");
    },
    //#region 上传文件
    //文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      this.$message.success("上传成功");
      // 处理上传成功后的逻辑，例如更新UI或者处理其他数据
    },
    //文件上传失败时的钩子
    onError(err, file, fileList) {
      console.log(err, file);
      this.$message.error("上传失败");
      // 处理上传失败后的逻辑
    },
    //改变
    handleChange(file, fileLists) {
      this.newFrom.FileUrl = file.raw; //文件流
      if (this.newFrom.FileUrl) {
        if (
          this.newFrom.FileUrl.type == ".csv" ||
          this.newFrom.FileUrl.type == "application/vnd.ms-excel" ||
          this.newFrom.FileUrl.type == "text/plain"
        ) {
          //名称回显
          this.newFrom.FileName = this.newFrom.FileUrl.name.split(".")[0];
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },
    //上传限制
    handleExceedVisio() {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传！`);
    },
    //#endregion
    //保存
    onSubmit(newFrom) {
      this.$refs[newFrom].validate((valid) => {
        if (valid) {
          this.$emit("fathernewFrom", this.newFrom); //把this.newFrom指传给父组件
        } else {
          return false;
        }
      });
    },
    //清空
    onclose() {
      (this.newFrom = {
        ID: "",
        ParentId: "",
        FileName: "",
        FileType: "",
        FileUrl: "",
        FullName: "",
        FullPath: "",
        SortID: "",
      }),
        this.$refs.newFrom.resetFields();
      // this.$emit("formClose", false);
    },
  },
};
</script>
<style scoped>
</style>

图1

图2