Vue Element el-upload文件/图片上传，父子组件回显处理

父组件代码：

       <el-form-item label="扫描件">
                <fileUpload
                  @success="scanningCopy"
                  ref="scanningCopy"
                ></fileUpload>
              </el-form-item>
        <script>
      //obj是子组件传过来的对象，由于保存的接口的附件字段是一个字符串，所以用JSON转一下
     // 1.赋值
      scanningCopy(obj) {
      this.scanningCopy = JSON.stringify(obj)
    },  
     // 2.编辑回显，回显的核心在于上传组件的fileList数组需要有值，并且一定要加上$nextTick
     //不然会出现视图刷新，但值还未取到的问题，接口返回的是一个字符串，需要JSON转回来
      edit(row) {
      this.carInfo = { ...row }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.scanningCopy.fileList.push(
          JSON.parse(this.scanningCopy)
        )
      })
    },
</script>
    

子组件代码：

<template>
  <div>
    <el-upload
      :before-upload="beforeUpload"
      accept="image/png, image/jpg, image/jpeg, .doc, .docx, .pdf"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-error="handleError"
      :file-list="fileList"
      ref="uploadDialog"
      :action="fileAction"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
	//核心代码：上传成功后，将接口返回的数据传输给父组件，这里传输一个对象出去
    handleSuccess(response, file, fileList) {
      this.$emit('success', {
        name: response.data.value[0].attachName,//这里的路径随着你上传接口的不同也会不同
        url: response.data.value[0].attachPath//这里的路径随着你上传接口的不同也会不同
      })
      this.$notify({
        title: '附件上传成功',
        type: 'success'
      })
    },

这篇好文章是转载于：学新通技术网