Vue 组件 - 上传考察照片功能实现（父组件和子组件）

父组件：

<template>
  <a-modal v-model='visiblePhotos' :title='title' width='70%'>
    <a-form
      :label-col='formItemLayout.labelCol'
      :wrapper-col='formItemLayout.wrapperCol'
    >
      <template v-for='item in pictureList'>
        <a-form-item :label='item.dictKey' :key='item.dictVal'>
          <UploadAdd :sysDictItemId='item.id' :allFileList='AllPictureList[item.remark]'></UploadAdd>
        </a-form-item>
      </template>
    </a-form>
    <template #footer>
      <a-button key='back' @click='handleCancel'>
        返回
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { selectdict } from '@/api/Bidding/BiddingPlan'
import UploadAdd from './UploadAdd.vue'
import { getPictureView } from '@/api/Supplier/SupplierInspection'

const formItemLayout = {
  labelCol: {
    span: 3
  },
  wrapperCol: {
    span: 21
  }
}

export default {
  name: 'InspectionPhotosAdd',
  components: {
    UploadAdd
  },
  data () {
    return {
      formItemLayout,
      form: {
        imgList: [],
        imgList1: []
      },
      visiblePhotos: false,
      title: '',
      loading: false,
      pictureList: [],
      AllPictureList: []
    }
  },
  computed: {
    messageId () {
      return this.$route.query.id
    }
  },
  methods: {
    add () {
      this.visiblePhotos = true
      this.title = '考察流程照片'
      this.PictureViewFun()
      this.handleSelectdict()
    },
    handleCancel (e) {
      this.visiblePhotos = false
    },
    handleSelectdict () {
      selectdict(['survey_picture']).then(res => {
        this.pictureList = res.data.survey_picture
      })
    },
    // 查看考察照片
    PictureViewFun () {
      getPictureView({ messageId: +this.messageId }).then(res => {
        this.AllPictureList = res.data
      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.ant-modal-footer {
  text-align: center !important;
}
// /deep/.ant-form-item {
//   margin-bottom: 0;
// }
</style>

## 子组件：

```html
<template>
  <div class='clearfix'>
    <a-upload
      action='#'
      :customRequest='uploadImage'
      list-type='picture-card'
      :file-list='fileList'
      @preview='handlePreview'
      :beforeUpload='planFileUploadPre'
      :remove='handleRemove'
      v-model='fileList'
    >
      <div>
        <a-icon type='plus' />
        <div class='ant-upload-text'>
          Upload
        </div>
      </div>
    </a-upload>
    <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
      <img alt='example' style='width: 100%' :src='previewImage' />
    </a-modal>
    <a-button type='primary' @click='PictureAddFun' v-if='!isDisable'>保存</a-button>
  </div>
</template>

<script>
import { uploadFile } from '@/api/upload'
import { getFileUrl } from '@/utils/util'
import { postPictureAdd } from '@/api/Supplier/SupplierInspection'

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  props: {
    allFileList: Array,
    sysDictItemId: Number
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: this.allFileList ? this.allFileList.map(item => ({
        name: item.pictureName,
        status: item.status,
        uid: item.url,
        url: item.pictureUrl
      })) : []
    }
  },
  created () {
    console.log(this.isDisable)
    console.log(this.allFileList)
  },
  computed: {
    messageId () {
      return this.$route.query.id
    },
    isDisable () {
      return this.$route.path === '/Supplier/InvestigationView'
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    /**
     * 上传招标类目文件之前的校验
     */
    planFileUploadPre (file) {
      if (!(file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/gif' || file.type === 'image/bmp')) {
        this.$message.error('文件格式错误，请上传正确的文件！')
        return false
      }
    },
    /**
     * 自定义上传
     */
    uploadImage (file) {
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      uploadFile(formData).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.$message.success('文件上传成功')
          this.fileList.push({
            uid: file.file.uid,
            name: 'image.png',
            status: 'done',
            url: getFileUrl(res.data.fileName)
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleRemove (fileList) {
      const imgUid = this.fileList.findIndex(item => item.uid === fileList.uid)
      this.fileList.splice(imgUid, 1)
    },
    // 上传考察照片
    PictureAddFun () {
      const data = this.fileList.map(item => ({
        sysDictItemId: this.sysDictItemId,
        messageId: +this.messageId,
        pictureName: item.name,
        pictureUrl: item.url,
        status: item.status,
        uid: item.uid
      }))
      console.log(this.fileList)
      postPictureAdd(data).then(res => {
        if (res.code === 0) {
          this.$message.success('上传成功')
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style>
.clearfix {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>

**allFileList 传值丢失问题分析：**

根据提供的代码，无法确定 allFileList 传值丢失的具体原因。可能的原因包括：

1. 父组件中的 AllPictureList 数组没有正确传递给子组件的 fileList 属性，导致子组件的 allFileList 无法正确初始化。

2. 子组件中的 fileList 数组被修改后，没有及时同步到父组件中的 AllPictureList 数组，导致数据丢失。

3. 父组件中的 visiblePhotos 属性值变化时，导致子组件被销毁重建，从而导致子组件中的 allFileList 重新初始化。

建议检查以上可能的原因，排查数据丢失的具体原因。可以在 Vue 开发者工具中查看组件的数据和属性值的变化，帮助定位问题。同时，建议在组件中添加必要的数据校验和错误提示，以便及时发现并处理数据错误。