diff --git a/jero-web/src/components/CollectionType/index.vue b/jero-web/src/components/CollectionType/index.vue
index 59fc7a1c6..ade1d8ce2 100644
--- a/jero-web/src/components/CollectionType/index.vue
+++ b/jero-web/src/components/CollectionType/index.vue
@@ -177,13 +177,13 @@
         </div>
       </div>
     </div>
-    <uploadFileChange ref="uploadFile" @uploadSuccess="uploadSuccess" :detailDate='detailDate'></uploadFileChange>
+    <uploadFileChangeDown ref="uploadFile" @uploadSuccess="uploadSuccess" :detailDate='detailDate'></uploadFileChangeDown>
   </div>
 </template>
 
 <script>
 import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
-import uploadFileChange from '@/components/uploadFileChange/file'
+import uploadFileChangeDown from '@/components/uploadFileChangeDown/file'
 export default {
   name: 'index',
   props: {
@@ -201,7 +201,7 @@ export default {
     }
   },
   components: {
-    uploadFileChange
+    uploadFileChangeDown
   },
   mounted() {
     if(this.detailDate.list[0].type === 'pull_more') {
diff --git a/jero-web/src/components/uploadFileChangeDown/file.vue b/jero-web/src/components/uploadFileChangeDown/file.vue
new file mode 100644
index 000000000..53d4b9023
--- /dev/null
+++ b/jero-web/src/components/uploadFileChangeDown/file.vue
@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
+      <div style='display: flex'>
+        <span style='flex: 1'>
+          {{ this.template.templateName === undefined ? '暂无模板': this.template.templateName }}
+        </span>
+        <span style='flex: none' @click='download'>
+           <a-icon type="download"/>
+        </span>
+      </div>
+      <a-upload-dragger
+        accept='*.*'
+        :disabled="disabled"
+        class="ant-upload-list"
+        :class="{'uploadFile':isUploadFile}"
+        name="file"
+        :file-list="myfileList"
+        :multiple="true"
+        :action="uploadAction+'?state='+state+'&cut='+cut"
+        :headers="headers"
+        @preview="preview"
+        :before-upload="beforeUpload"
+        :remove='remove'
+        @change="handleChange">
+        <p v-if="!isUploadFile">
+          <a-icon class="action-upload" type="cloud-upload"/>
+        </p>
+        <p v-if="!isUploadFile" class="ant-upload-text" style="font-size: 14px;line-height: 30px">
+          {{this.$t('clickUpload')}}</p>
+      </a-upload-dragger>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
+import { Base64 } from 'js-base64'
+
+export default {
+  name: 'file',
+  props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType', 'isUploadFile','detailDate'],
+  data() {
+    return {
+      visible: false,
+      title: this.$t('clickUpload'),
+      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
+      state: undefined,
+      myuploadAction: window._CONFIG['domianURL'] + this.thisFileUploadUrl,
+      upDataList: [],
+      downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
+      fileList: [],
+      myfileList: [],
+      isLoding: false,
+      cut: '',
+      template: {},
+    }
+  },
+  created() {
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    this.headers = { 'X-Access-Token': token }
+    this.containerId = 'container-ty-' + new Date().getTime()
+  },
+  mounted() {
+    this.detailDate.list.forEach((item) => {
+       if(item.type === 'file') {
+          this.template.templateId = item.templateId
+          this.template.templateName = item.templateName
+       }
+    })
+    let long = localStorage.getItem('language')
+    this.cut = ''
+    if (long && long == 'zh-cn') {
+      this.cut = 'cn'
+    } else if (long && long == 'en-us') {
+      this.cut = 'en'
+    }
+    // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
+  },
+  methods: {
+    download() {
+      downloadFile('/sys/common/downLoadFile', this.template.templateName, { id: this.template.templateId })
+    },
+    perentHandleFunc(data) {
+      this.myfileList = data
+      if (data && data.length > 0) {
+        this.myfileList.forEach((res) => {
+          res.name = res.fileName
+          res.uid = res.id
+        })
+      } else {
+        this.myfileList = []
+      }
+    },
+    beforeUpload(file) {
+
+      console.log(file)
+      // let thisFileType = this.thisFileType.replace(/\s+/g, "");
+      this.fileTypeSatus = true
+      //TODO 客户要求不拦截文件
+      // if(file.type){
+      //   if (thisFileType.indexOf(file.type) != -1) {
+      //     this.fileTypeSatus = true;
+      //   }else{
+      //     this.fileTypeSatus = false;
+      //   }
+      // }else{
+      //   if(file.name.slice(file.name.length - 3 , file.name.length)  == 'rar'){
+      //    this.fileTypeSatus = true
+      //   }else if(file.type == 'application/x-zip-compressed'){
+      //     this.fileTypeSatus = true
+      //   }else{
+      //     this.fileTypeSatus = false;
+      //   }
+      // }
+      this.$message.destroy()
+    },
+    remove() {
+      this.fileTypeSatus = true
+    },
+    mypreview(item) {
+      let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
+      window.open(url, '_blank')
+    },
+    handleChange(info) {
+      if(info.fileList.length > 1) {
+        this.$message.warning(this.$t('onlyOnefileUploaded'))
+        return
+      }
+      let { file } = info
+      const status = info.file.status
+      info.fileList.forEach((val, index) => {
+        if (val.response && !val.response.result) {
+          this.$message.error(val.response.message)
+          info.fileList.splice(index, 1)
+        }
+      })
+      if (status === 'error') {
+        this.$emit('uploadSuccess', this.fileList)
+        this.$message.destroy()
+        this.$message.error(`${info.file.name}` + this.$t('FileUploadFailed'))
+      } else if (status === 'removed') {
+        this.myfileList = info.fileList
+        this.fileList = []
+        this.myfileList.forEach((res) => {
+          if (res.response) {
+            this.fileList.push(res.response.result)
+          } else {
+            this.fileList.push(res)
+          }
+        })
+        this.$emit('uploadSuccess', this.fileList)
+        if (this.myfileList.length > 0) {
+          this.$message.destroy()
+          this.$message.success(`${info.file.name}` + this.$t('DeletedSuccessfully'))
+        }
+      } else if (status === 'done') {
+        this.fileList = []
+        this.myfileList = info.fileList
+        if (info.fileList.length > 20) {
+          info.fileList.splice(20)
+          this.myfileList = info.fileList
+          this.myfileList.forEach((res) => {
+            if (res.response) {
+              this.fileList.push(res.response.result)
+            } else {
+              this.fileList.push(res)
+            }
+          })
+          this.$emit('uploadSuccess', this.fileList)
+          this.$message.destroy()
+          this.$message.error(this.$t('UploadMost'))
+          return
+        }
+        this.myfileList.forEach((res) => {
+          if (res.response) {
+            this.fileList.push(res.response.result)
+          } else {
+            this.fileList.push(res)
+          }
+        })
+        this.$emit('uploadSuccess', this.fileList)
+        if (this.myfileList.length > 0) {
+          this.$message.destroy()
+          if (file.response.success) {
+            this.$message.success(`${info.file.name}` + this.$t('FileUploadedSuccessfully'))
+          }
+        }
+      } else if (status === 'uploading') {
+        this.myfileList = info.fileList
+        // this.$message.success(`${info.file.name} 文件上传成功。`);
+      }
+    },
+    resetFileList() {
+      this.myfileList = []
+      this.fileList = []
+    },
+    preview(file) {
+      let fileQuery = file.response ? file.response.result : file
+      let fileName = fileQuery.fileName
+      let index1 = fileName.lastIndexOf('.')
+      let index2 = fileName.length
+      let fileSuffix = fileName.substring(index1, index2)
+      if (fileSuffix === '.pdf') {
+        window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id))
+      } else if (fileSuffix === '.docx') {
+        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
+        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
+        window.open(url, '_blank')
+      } else {
+        downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.ant-upload-list-item-name {
+  color: rgba(0, 0, 0, 0.65) !important;
+}
+
+.action-upload {
+  font-size: 67px;
+  color: #c0c4cc;
+}
+
+.uploadFile {
+
+}
+</style>
\ No newline at end of file