处理文件上传的逻辑,修复上传为空的问题
This commit is contained in:
		
							parent
							
								
									74557d5fdb
								
							
						
					
					
						commit
						720ba0553c
					
				| 
						 | 
				
			
			@ -78,6 +78,7 @@
 | 
			
		|||
 | 
			
		||||
<script>
 | 
			
		||||
import JSZip from 'jszip'
 | 
			
		||||
import FileSaver from 'file-saver'
 | 
			
		||||
import PhdSelect from '../PHDSelect.vue'
 | 
			
		||||
import { getAction,postAction } from '../../../../api/manage'
 | 
			
		||||
const columns = [
 | 
			
		||||
| 
						 | 
				
			
			@ -232,11 +233,24 @@ export default {
 | 
			
		|||
    beforeUpload(file,fileList) {
 | 
			
		||||
      this.fileList = fileList
 | 
			
		||||
    },
 | 
			
		||||
    async handleUpload({ file }) {
 | 
			
		||||
    handleUpload({ file }) {
 | 
			
		||||
      this.uploading = true
 | 
			
		||||
      this.fileNum += 1
 | 
			
		||||
      if (this.fileNum == this.fileList.length) {
 | 
			
		||||
        await this.zipFile(this.fileList, (added) => { }).then(content => {
 | 
			
		||||
        this.zipFile(this.fileList)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    async zipFile(fileList, onProgress) {
 | 
			
		||||
      const zip = new JSZip()
 | 
			
		||||
      const promises=[]
 | 
			
		||||
      fileList.forEach(file => {
 | 
			
		||||
        promises.push(this.readAsArrayBuffer(file))
 | 
			
		||||
      })
 | 
			
		||||
      Promise.all(promises).then(result => {
 | 
			
		||||
        result.forEach(res => {
 | 
			
		||||
          zip.file(res.fileName, res.data)
 | 
			
		||||
        })
 | 
			
		||||
        zip.generateAsync({ type: 'blob' }).then(content => {
 | 
			
		||||
          let file = new File([content], 'test.zip', { type: content.type })
 | 
			
		||||
          const formData = new FormData()
 | 
			
		||||
          formData.append("file",file)
 | 
			
		||||
| 
						 | 
				
			
			@ -244,37 +258,24 @@ export default {
 | 
			
		|||
            this.uploading = false
 | 
			
		||||
            this.fileNum = 0
 | 
			
		||||
            if (res.success) {
 | 
			
		||||
              console.log(res);
 | 
			
		||||
              this.$message.success(res.message)
 | 
			
		||||
            } else {
 | 
			
		||||
              this.$message.warning(res.message)
 | 
			
		||||
            }
 | 
			
		||||
          })
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    async zipFile(fileList, onProgress) {
 | 
			
		||||
      const zip = new JSZip()
 | 
			
		||||
      let i = 0
 | 
			
		||||
      for await (let f of fileList) {
 | 
			
		||||
        const fileData = await this.readAsArrayBuffer(f)
 | 
			
		||||
        console.log(f.webkitRelativePath);
 | 
			
		||||
        zip.file(f.webkitRelativePath, fileData, { createFolders: true })
 | 
			
		||||
        i++
 | 
			
		||||
        onProgress && onProgress(i)
 | 
			
		||||
      }
 | 
			
		||||
      return zip.generateAsync({ type: 'blob' })
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    async readAsArrayBuffer(file){
 | 
			
		||||
      return new Promise((resolve, reject) => {
 | 
			
		||||
      return new Promise((resolve) => {
 | 
			
		||||
        let reader = new FileReader()
 | 
			
		||||
        reader.readAsArrayBuffer(file)
 | 
			
		||||
        reader.onload = () => {
 | 
			
		||||
          resolve(reader.result)
 | 
			
		||||
        }
 | 
			
		||||
        reader.onloadend = () => {
 | 
			
		||||
          reject('FileReader failed')
 | 
			
		||||
        reader.onload = (e) => {
 | 
			
		||||
          resolve({
 | 
			
		||||
            fileName: file.name,
 | 
			
		||||
            data: e.target.result
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue
	
	Block a user