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-formref="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-radiolabel="1"v-model="newFrom.EquipmentType">油泵车</el-radio><el-radiolabel="2"v-model="newFrom.EquipmentType">电源车</el-radio></el-radio-group></el-form-item><el-form-itemlabel="文件名称"prop="FileName"><el-inputv-model="newFrom.FileName"placeholder="请上传文件"readonly></el-input></el-form-item><el-form-item label="上传文件"><!-- accept 限制上传类型 --><el-uploadref="fileUpload"class="upload-demo"action="":on-change="handleChange":file-list="fileListUpload"accept=".csv,.txt":on-exceed="handleExceedVisio":auto-upload="false"><el-buttonsize="small"type="primary">点击上传</el-button></el-upload></el-form-item><el-form-itemlabel="排序"prop="SortID"><el-inputv-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-buttontype="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>