vue编辑表单中有关文件的回显问题

川长思鸟来 2022-09-01 09:20 424阅读 0赞

使用的组件为 ElementUI 中的 `el-upload` 组件，在编辑时可以做到回显文件名。

刚开始使用的是 `<el-input type="file" />` 的组件，在编辑时暂时没办法做到文件名回显。  
![在这里插入图片描述][afdd22c9687d4603bd2e942d2abd91e4.png]

<el-form :model="ruleForm" :rules="rules" ref="collectForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="文件" prop="config_file">
            <el-upload
                class="upload-demo"
                ref="upload"
                v-model="ruleForm.config_file"
                action="action"
                :limit="1"
                :multiple="false"
                :before-upload="beforeUpload"
                :on-change="onChange"
                :on-remove="onRemove"
                :on-exceed="onExceed"
                :http-request="upload"
                :file-list="fileList"
                :auto-upload="false">
                 <el-button slot="trigger" size="small">选取文件</el-button>
            </el-upload>
        </el-form-item>
    </el-form>
    <template v-slot:footer>
    	<el-button @click="save" size="small" type="primary"">确 定</el-button>
    </template>

export default { 
      data() { 
        return { 
          fileList: [],
          ruleForm: { 
            config_file: ''
          },
          rules: { 
            config_file: [
              {  required: true, message: '请选择配置文件', trigger: 'change' }
            ]
          },
          fileData: ''
        }
      },
      methods: { 
        upload() { },
        beforeUpload(file) { 
          this.fileData = file
        },
        onChange(file, fileList) { 
          this.$nextTick(() => { 
            this.fileList.length = 0
            this.ruleForm.config_file = file.name
            this.fileList = fileList
          })
          this.fileData = file
        },
        onRemove(file, fileList) { 
          this.fileData = ''
          this.fileList = fileList
          this.ruleForm.config_file = ''
        },
        onExceed() { 
          this.$message({  type: 'warning', message: '请先删除已上传文件，再重新选择文件' })
        },
        save() { 
          this.$refs.upload.submit()
        },
        // 涉及编辑时，打开编辑框回显文件名
        open(type, data) { 
          this.type = type
          this.visible = true
          if (data && this.type !== 'add') { 
            this.fileList = [{  name: data.config_file, url: '' }]
            this.ruleForm.config_file = data.config_file
          }
        }
      }
    }

[afdd22c9687d4603bd2e942d2abd91e4.png]: /images/20220829/c066e32a73874aa2a844643897ad4df6.png