文件上传组件优化

src/api/sys/OSSService.js

@@ -107,11 +107,12 @@ export function fileName (file) {
   return fileName
 }
 
-export function beforeAvatarUpload (file) {
+export function beforeAvatarUpload (file, fileList, maxValue) {
   // 文件大小校验
-  const isLt2M = file.size / 1024 / 1024 < 300
+  const isLt2M = file.size / 1024 / 1024 < maxValue
   if (!isLt2M) {
-    this.$message.error('文件大小不能超过 300M !')
+    fileList.splice(fileList.length - 1, 1)
+    console.log('文件大小不能超过 ' + maxValue + ' MB!')
   }
   return isLt2M
 }
@@ -129,7 +130,10 @@ export function exnameFix (file, isShow, names) {
   return true
 }
 
-export async function httpRequest (file, name, type) { // 阿里云OSS上传
+export async function httpRequest (file, name, type, maxValue) { // 阿里云OSS上传
+  if (!beforeAvatarUpload(file.file, [], maxValue)) {
+    return
+  }
   console.log('开始上传')
   // 判断扩展名
   const tmpcnt = file.file.name.lastIndexOf('.') // 获取.的下标

src/views/common/upLoadComponent.vue

@@ -90,7 +90,9 @@
         url: '',
         showViewer: false,
         ossService: null,
-        auth: ''
+        auth: '',
+        directory: 'public',
+        maxValue: 300
       }
     },
     watch: {
@@ -105,13 +107,36 @@
       window.onPreview = this.onPreview
     },
     methods: {
-      newUpload (method, fileList) {
-        this.auth = method
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       */
+      newUpload (auth, fileList, directory, maxValue) {
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
         this.dataList = JSON.parse(JSON.stringify(fileList))
         this.dataListNew = JSON.parse(JSON.stringify(fileList))
       },
       async httpRequest (file) {
-        await httpRequest(file, fileName(file), 'projectRecords')
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
       },
       uploadVideoProcess (event, file, fileList) {
         this.progressFlag = true // 显示进度条
@@ -122,6 +147,13 @@
         }
       },
       changes (file, fileList) {
+        if (file.status !== 'ready') {
+          return
+        }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
         this.dataListNew = []
         this.dataList.forEach((item) => {
           this.dataListNew.push(item)
@@ -141,7 +173,6 @@
             item.url = item.raw.url
           }
         })
-        beforeAvatarUpload(file)
       },
       showFile (row) {
         openWindowOnUrl(row)
@@ -173,12 +204,22 @@
           this.$refs.upload.uploadFiles.splice(index - num, 1)
         }
       },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
       clearUpload () {
         this.$refs.upload.uploadFiles = []
       },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
       getDataList () {
         return this.dataListNew
       },
+      /**
+       * 判断进度条是否结束
+       * @returns {boolean}
+       */
       checkProgress () {
         if (this.progressFlag === true) {
           this.$message.warning('请等待文件上传完成再进行提交')

src/views/modules/roster/RosterForm.vue

@@ -1073,9 +1073,7 @@
         </el-row>
       </el-form>
       <!--        附件-->
-      <UpLoadComponent
-        ref="uploadComponent">
-      </UpLoadComponent>
+      <UpLoadComponent ref="uploadComponent"></UpLoadComponent>
       <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
       <span slot="footer" class="dialog-footer">
       <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
@@ -1325,12 +1323,12 @@
             this.rosterService.queryById(this.inputForm.id).then(({data}) => {
               this.inputForm = this.recover(this.inputForm, data)
               this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
-              this.$refs.uploadComponent.newUpload(method, this.inputForm.rosterFilesDTOList)
+              this.$refs.uploadComponent.newUpload(method, this.inputForm.rosterFilesDTOList, 'roster')
               this.loading = false
             })
           }
           if (method !== 'edit' && method !== 'view') {
-            this.$refs.uploadComponent.newUpload(method, [])
+            this.$refs.uploadComponent.newUpload(method, [], 'roster')
           }
         })
       },