www

src/register.js

@@ -22,7 +22,8 @@ import sModal from '@/components/modal/modal'
 import BtnGroup from '@/components/btnGroup/index.vue'
 import EComment from '@/components/comment/index.vue'
 import fModal from '@/components/modal/index'
-import fileLoad from '@/views/components/common/upLoad'
+import fileLoad from '@/views/components/common/fileLoad'
+import upLoad from '@/views/components/common/upLoad'
 import paraMultiSelect from '@/views/components/common/paraMultiSelect'
 import paraSelect from '@/views/components/common/paraSelect'
 import baseSelect from '@/views/components/common/baseSelect'
@@ -33,6 +34,7 @@ Vue.component('e-comment', EComment);
 Vue.component('btn-group', BtnGroup);
 Vue.component('sModal', sModal)
 Vue.component('fileLoad', fileLoad)
+Vue.component('upLoad', upLoad)
 Vue.component('fModal', fModal)
 Vue.component('paraMultiSelect', paraMultiSelect)
 Vue.component('paraSelect', paraSelect)

src/views/components/common/fileLoad.vue

+<template>
+  <div v-if="file.downloadUrl" class="file-box">
+    <div>
+      <document-view :fileUrl="file.downloadUrl" :fileName="file.fileName" :imageArray="[file.downloadUrl]"></document-view>
+    </div>
+    <a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(file)" />
+  </div>
+  <div v-else>
+    <a-form-model-item :prop="name +'.'+ index + '.downloadUrl'" :rules="{required: true, message: '请上传附件',trigger: 'blur',}">
+      <input type="file" :ref="name +'fileElem' + index" class="visually-hidden" @change="handleFiles(file, index)" />
+      <a-button @click="fileSelect(index)"><a-icon type="upload" />选择文件</a-button>
+    </a-form-model-item>
+  </div>
+</template>
+<script>
+import documentView from '@/views/components/common/documentView'
+export default {
+  name: "fileLoad",
+  components: {
+    documentView
+  },
+  data () {
+    return {
+    };
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return null
+      }
+    },
+    file: {
+      type: Object,
+      default: () => {
+        return null
+      }
+    },
+    name: {
+      type: String,
+      default: () => {
+        return 'fileList'
+      }
+    },
+    index: {
+      type: Number,
+      default () {
+        return 0
+      },
+    },
+  },
+  created () {
+
+  },
+  methods: {
+    deletefile (item) {
+      this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => {
+        if (data) {
+          item.fileName = ''
+          item.downloadUrl = ''
+          item.downloadId = ''
+        }
+      }).catch(() => {
+        this.$message.error('删除失败')
+      })
+    },
+    handleFiles (item, index) {
+      let fileElem = this.$refs[this.name + 'fileElem' + index]
+      let files = fileElem.files
+      if (files.length <= 0) {
+        this.$message.error('未选中文件，请尝试重新选择')
+        return
+      }
+      if (!this.fileCheck(files[0]))
+        return
+      this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
+        if (data) {
+          item.fileName = files[0].name
+          item.downloadUrl = data.downloadUrl
+          item.downloadId = data.id
+          console.log(item, data)
+        } else
+          this.$message.error('上传失败')
+      }).catch(() => {
+        this.$message.error('上传失败')
+      })
+    },
+    fileCheck (file) {
+      //判断是否小于1M
+      let isLtSize = file.size < 1024 * 1024 * 15;
+      if (!isLtSize) {
+        this.$message.error('文件大小不能超过15M！');
+        return false
+      }
+      // var fileNames = file.name.split('.')
+      // var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
+      // var extList = ['doc', 'docx', 'pdf']
+      // if (!extList.find((item) => item == fileType)) {
+      //   this.$message.error('文件格式错误！')
+      //   return false
+      // }
+      return true
+    },
+    uploadHandle (file, fileName) {
+      let formData = new FormData()
+      formData.append('file', file)
+      formData.append('fileName', fileName)
+      return formData
+    },
+    fileSelect (index) {
+      let fileElem = this.$refs[this.name + 'fileElem' + index]
+      if (fileElem) {
+        fileElem.click()
+      }
+    },
+  },
+  watch: {
+    value: {
+      handler (value) {
+
+      },
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.upload-layout {
+  display: inline-block;
+  margin: 0 10px;
+  height: 30px;
+  line-height: 30px;
+
+  .file-box {
+    margin: 0 8px;
+  }
+  .visually-hidden {
+    display: none !important;
+  }
+}
+</style>
+

src/views/components/common/upload.vue

@@ -15,7 +15,7 @@
 <script>
 import documentView from '@/views/components/common/documentView'
 export default {
-  name: "fileLoad",
+  name: "upLoad",
   components: {
     documentView
   },