大文件上传获取重复

src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue

@@ -178,7 +178,8 @@
             </div>
           </div>
           <div slot="footer" class="dialog-footer" style="margin-top: 85px !important;">
-            <el-button v-if="(isTitleType === 3 && selectedCategory.arrangeType === 1) || isTitleType === 4 || isTitleType === 6 || (isTitleType === 3 && activeIndex === 1)" type="primary" style="width: 84px;" @click="handleAiCategory">AI辅助著录</el-button>
+            <el-button type="text" style="width: 140px; border-color: #0348f3; color: #0348f3;">保存并新增下一条</el-button>
+            <el-button v-if="(isTitleType === 3 && selectedCategory.arrangeType === 1) || isTitleType === 4 || isTitleType === 6 || (isTitleType === 3 && activeIndex === 1)" type="text" style="width: 84px; border-color: #0348f3; color: #0348f3; " @click="handleAiCategory">AI辅助著录</el-button>
             <el-button type="primary" @click="handlerArchivesSubmit">保存</el-button>
           </div>
         </div>

src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload.vue

@@ -1,35 +1,36 @@
 <template>
-  <!--上传组件-->
-  <el-dialog class="big-file" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadBigVisible">
-    <template #title>
-      {{ uploadTitle }}
-      <span style="color: red;font-size: 12px; ">单个文件不可超过10GB</span>
-    </template>
-    <div class="setting-dialog">
-      <div class="uploader-big">
-        <uploader
-          ref="uploader"
-          :auto-start="false"
-          :options="options"
-          :file-status-text="statusText"
-          @file-success="fileSuccess"
-          @files-added="filesAdded"
-          @file-error="onFileError"
-          @file-removed="filesRemove"
-        >
-          <uploader-unsupport />
-          <uploader-drop>
-            <p>将文件拖到此处，或点击上传</p>
-            <uploader-btn single>
-              <slot>
-                <i class="iconfont icon-tianjiawenjian upload-icon" />
-              </slot>
-            </uploader-btn>
-            <div class="el-upload__tip">上传限制文件大小：最大10GB/个</div>
+  <div>
+    <!--上传组件-->
+    <el-dialog class="big-file" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadBigVisible">
+      <template #title>
+        {{ uploadTitle }}
+        <span style="color: red;font-size: 12px; ">单个文件不可超过10GB</span>
+      </template>
+      <div class="setting-dialog">
+        <div class="uploader-big">
+          <uploader
+            ref="uploader"
+            :auto-start="false"
+            :options="options"
+            :file-status-text="statusText"
+            @file-success="fileSuccess"
+            @files-added="filesAdded"
+            @file-error="onFileError"
+            @file-removed="filesRemove"
+          >
+            <uploader-unsupport />
+            <uploader-drop>
+              <p>将文件拖到此处，或点击上传</p>
+              <uploader-btn single>
+                <slot>
+                  <i class="iconfont icon-tianjiawenjian upload-icon" />
+                </slot>
+              </uploader-btn>
+              <div class="el-upload__tip">上传限制文件大小：最大10GB/个</div>
             <!-- <uploader-btn :attrs="attrs">选择图片</uploader-btn>
               <uploader-btn :directory="true">选择文件夹</uploader-btn> -->
-          </uploader-drop>
-          <uploader-files />
+            </uploader-drop>
+            <uploader-files />
           <!-- <ul class="file-list">
             <li
               v-for="file in fileList"
@@ -45,17 +46,35 @@
               />
             </li>
           </ul> -->
-        </uploader>
+          </uploader>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="handleCloseDialog">取消</el-button>
+          <el-button :loading="btnLoading" type="primary" @click="handleUploadConfirm">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 判断是否有重复上传的文件 -->
+    <el-dialog class="collectUpload-dialog" title="文件上传" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="repeatFileVisible">
+      <div class="setting-dialog">
+        <p style="color:#f00;margin-bottom: 20px;display:block">提示：以下所选文件在当前档案文件列表已存在</p>
+        <div v-for="item in repeatFileData" :key="item.name" class="file-list" style="margin-bottom: 10px;">
+          <i class="iconfont icon-xiaowenjian" />
+          {{ item.name }}
+        </div>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="handleCloseDialog">取消</el-button>
-        <el-button :loading="btnLoading" type="primary" @click="handleUploadConfirm">保存</el-button>
+        <el-button type="primary" @click="handleRepeatFile(0)">直接上传</el-button>
+        <el-button style="width: 85px;" type="primary" @click="handleRepeatFile(1)">去重后上传</el-button>
+        <el-button type="text" @click="repeatFileVisible = false">取消</el-button>
       </div>
-    </div>
-  </el-dialog>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { FetchInitFileCategoryView } from '@/api/collect/collect'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 import SparkMD5 from 'spark-md5'
@@ -125,7 +144,11 @@ export default {
       },
       fileList: [],
       nowDate: null,
-      submitted: false
+      submitted: false,
+      // 重复的文件
+      repeatFileVisible: false,
+      repeatFileData: [],
+      originFileData: []
     }
   },
   computed: {
@@ -137,6 +160,16 @@ export default {
     this.options.target = this.baseApi + '/api/collect/upload'
   },
   methods: {
+    // 电子原文列表
+    getFileList() {
+      const params = {
+        'categoryId': this.selectedCategory.id,
+        'archivesId': this.arcId
+      }
+      return FetchInitFileCategoryView(params).then(data => {
+        this.originFileData = data.returnlist
+      })
+    },
     fileSuccess(rootFile, file, response, chunk) {
       this.chunkOffset = []
       const result = JSON.parse(response)
@@ -235,10 +268,47 @@ export default {
     onFileError(rootFile, file, message, chunk) {
       this.$message({ message: '上传出错：' + message, type: 'error', offset: 8 })
     },
-    filesAdded(file, fileList, event) {
+    handleRepeatFileCancel() {
+      this.repeatFileVisible = false
+      this.repeatFileData = []
+      this.originFileData = []
+      const uploaderInstance = this.$refs.uploader.uploader
+      uploaderInstance.fileList[0].cancel()
+    },
+    handleRepeatFile(type) {
+      if (type === 0) {
+        // 直接上传
+        this.computeMD5(this.fileList[0])
+      } else {
+        // 去重后上传
+        const nonRepeatFileData = this.fileList.filter(file => !this.repeatFileData.some(repeatFile => repeatFile.name === file.name))
+        if (nonRepeatFileData.length === 0) {
+          this.$message({ message: '当前所选文件去重后无可上传的文件', type: 'error', offset: 8 })
+          this.handleRepeatFileCancel()
+          this.handleCloseDialog()
+        } else {
+          this.computeMD5(this.fileList)
+        }
+      }
+      this.repeatFileVisible = false
+    },
+    async filesAdded(file, fileList, event) {
+      this.fileList = []
+      // 先获取原文件列表
+      await this.getFileList()
+
       file.forEach((e) => {
         this.fileList.push(e)
-        this.computeMD5(e)
+        const existingFileNames = this.originFileData.map(file => file.file_name)
+
+        this.repeatFileData = this.fileList.filter(file => existingFileNames.includes(file.name))
+        console.log('filteredFileList', this.repeatFileData)
+
+        if (this.repeatFileData.length === 0) {
+          this.computeMD5(e)
+        } else {
+          this.repeatFileVisible = true
+        }
       })
     },
     computeMD5(file) {
@@ -248,12 +318,13 @@ export default {
         this.$message.warning(maxMessage)
         return false
       }
+
       const fileReader = new FileReader()
       const time = new Date().getTime()
       const blobSlice =
-        File.prototype.slice ||
-        File.prototype.mozSlice ||
-        File.prototype.webkitSlice
+      File.prototype.slice ||
+      File.prototype.mozSlice ||
+      File.prototype.webkitSlice
       let currentChunk = 0
       // 文件分片大小
       const chunkSize = 10 * 1024 * 1024
@@ -262,6 +333,14 @@ export default {
       // 文件状态设为"计算MD5"
       file.cmd5 = true
       file.pause()
+
+      // 定义 loadNext 函数为箭头函数
+      const loadNext = () => {
+        const start = currentChunk * chunkSize
+        const end = start + chunkSize >= file.size ? file.size : start + chunkSize
+        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
+      }
+
       loadNext()
       fileReader.onload = (e) => {
         spark.append(e.target.result)
@@ -291,11 +370,6 @@ export default {
         this.error(`文件${file.name}读取出错，请检查该文件`)
         file.cancel()
       }
-      function loadNext() {
-        const start = currentChunk * chunkSize
-        const end = start + chunkSize >= file.size ? file.size : start + chunkSize
-        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
-      }
     },
     // 将上传的图片转为base64
     getBase64(file) {
@@ -322,6 +396,8 @@ export default {
     handleCloseDialog(done) {
       this.uploadBigVisible = false
       this.fileList = []
+      const uploaderInstance = this.$refs.uploader.uploader
+      uploaderInstance.fileList[0].cancel()
     }
   }
 }

src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue

@@ -207,7 +207,12 @@ export default {
       } else {
         // 去重后上传
         const nonRepeatFileData = this.fileList.filter(file => !this.repeatFileData.some(repeatFile => repeatFile.name === file.name))
-        this.uplaodToList(nonRepeatFileData)
+        if (nonRepeatFileData.length === 0) {
+          this.$message({ message: '当前所选文件去重后无可上传的文件', type: 'error', offset: 8 })
+          this.handleRepeatFileCancel()
+        } else {
+          this.uplaodToList(nonRepeatFileData)
+        }
       }
       this.repeatFileVisible = false
     },