vue antdesign upload 上传和回显

<template>
  <div>

    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      :width="800"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form-model
        key="wrongViews"
        ref="ruleForm"
        :model="flTestPlan"
        :rules="rules"
        v-bind="modelObj"
        v-if="modalOptType!='views'"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="上传文件" prop="fileUPload">
              <a-upload
                :data="{upload_sysName:'flc',upload_folder:'flAttachFile'}"
                :action="apiUrl.uploadServlet"
                @change="uploadChange"
                :fileList="fileList"
                :multiple="true"
              >
                <a-button>
                  <a-icon type="upload"/>
                  选择文件
                </a-button>
              </a-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!--查看-->
      <a-form-model
        key="views"
        :model="flTestPlan"
        v-bind="modelObj"
        v-if="modalOptType=='views'"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="上传文件" prop="fileUPload">
              <li v-for="(item, index) in fileList" :key="index" v-show="show"><a :href="item.url"
                                                                                  style="font-size:10px">{{item.name}}</a>
              </li>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
  import { eachArray,judgeObj, eachObj,dictDataInit,getDataCommon,createUuid } from '@/utils/util'
  import urlApi from '@/config/configUrl'
  export default {
    data() {
      return {
        show: false,
        fileList: [],//所有附件的集合
        newFileList: [],
      }
    },
    computed: {
      apiUrl() {
        return urlApi
      }
    },
    methods: {
      uploadChange({fileList}) {
        this.show = false
        this.newFileList = []
        this.fileList = fileList
        this.fileList.forEach(item => {
          const {status, response = {}} = item
          if (status === 'done') {
            const {fileNameOld, fileType, murl} = response
            this.newFileList.push({
              infoId: createUuid('pk'),
              attachName: fileNameOld,
              attachType: fileType,
              attachUrl: murl,
              attachFolder: 0,
            })
          }
        })
      },
      handleOk() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const requestParameters = eachObj(this.flTestPlan, 'flTestPlan')
            if (this.modalOptType == 'add') {
              let fileRequestParameters = {}
              fileRequestParameters.pageName = 'fl-attach-file-addbatch'
              fileRequestParameters.formName = 'addFormBatch'
              fileRequestParameters['ifBatch'] = 'T'
              fileRequestParameters['flAttachFile.splitAttr'] = 'infoId'
              fileRequestParameters['flTestPlan.sysEname'] = this.$sysEname
              this.newFileList.push({
                objId: requestParameters['flTestPlan.infoId']
              })
              fileRequestParameters['flAttachFile'] = this.newFileList
              getCommonSubmit(fileRequestParameters).then(res => {
                if (res.flag == 'T') {
                  this.$message.success('上传成功');
                  this.modalVisible = false
                } else {
                  this.$message.error(res.msg);
                }
                requestParameters.pageName = 'fl-test-plan'
                requestParameters.formName = 'addForm'
                requestParameters['flTestPlan.sysEname'] = this.$sysEname
                requestParameters['flTestPlan.createUser'] = storage.get('loginUser').userEname
                getCommonSubmit(requestParameters).then(res => {
                  if (res.flag == 'T') {
                    this.getDataList()
                  } else {
                    this.$message.error(res.msg)
                  }
                })
              })
            } else if (this.modalOptType == 'edit') {
              let fileRequestParameters = {}
              fileRequestParameters.pageName = 'fl-attach-file-addbatch'
              fileRequestParameters.formName = 'editFormBatch'
              fileRequestParameters['ifBatch'] = 'T'
              fileRequestParameters['flAttachFile.splitAttr'] = 'infoId'
              this.newFileList.push({
                'w_objId': requestParameters['flTestPlan.infoId'],
                objId: requestParameters['flTestPlan.infoId']
              })
              fileRequestParameters['flAttachFile'] = this.newFileList
              if (this.newFileList != []) {
                getCommonSubmit(fileRequestParameters).then(res => {
                  if (res.flag == 'T') {
                    this.$message.success('上传成功');
                    this.modalVisible = false
                  } else {
                    this.$message.error(res.msg);
                  }
                })
              }
              requestParameters['flTestPlan.w_infoId'] = requestParameters['flTestPlan.infoId']
              requestParameters.pageName = 'fl-test-plan'
              requestParameters.formName = 'editForm'
              getCommonSubmit(requestParameters).then(res => {
                if (res.flag == 'T') {
                  this.modalVisible = false
                  this.getDataList()
                } else {
                  this.$message.error(res.msg)
                }

              })
            }

          }
        })
      },

      modalClick(e, obj, type) {
        this.modalOptType = type

        switch (type) {
          case 'add':
            break
          case 'views':
            this.getFile(obj)
            break
          case 'edit':
            this.getFile(obj)
            break
        }
      },
      getFile(obj) {
        this.show = true
        const selectParameters = {
          pageName: 'fl-attach-file',
          formName: 'searchForm',
          'flAttachFile.w_objId': obj.flTestPlan.infoId
        }
        getCommonList(selectParameters).then(res => {
          this.fileList = []
          if (res.rows.length > 0) {
            res.rows.forEach(item => {
              const {attachName, attachUrl, attachType} = item.flAttachFile
              this.fileList.push({
                uid: createUuid('pk'),
                name: attachName,
                status: 'done',
                url: attachUrl,
                response: {
                  fileNameOld: attachName,
                  fileType: attachType,
                  murl: attachUrl
                }
              })
            })
          }
        })
      },

    }
  }

</script>