Fragment upload and breakpoint resume

Fragment upload and breakpoint continuation

Github Warehouse complete code

effect

Use online editing cloudstudio

initialization

• npm i init
• npm i express
• npm i express-fileupload
• npm i axios
• npm i crypto-js

Why does the breakpoint continue

• Browser limits file size
• Retransmit after upload failure
• Interrupt transmission and then transmit again

Realize the idea

front end

1. Get the papers , Read the file

function read(file){
    

  const reader=new FileReader()
  return new Promise(((resolve, reject) => {
    
    reader.onload=function (){
     //  Read successfully and return 
      resolve(reader.result)
    }
    reader.onerror=reject //  Failure to return 
    reader.readAsBinaryString(file) //  Return the read string 
  }))
}

2. MD5 encryption

  const hash=CryptoJS.MD5(content)

3. Slice the file

 while (uploaded<size){
    
    const chunk=file.slice(uploaded,uploaded+chunkSize,type) // file Inherited from blod,blod There are ways to slice, The file can be sliced 
    const formData=new FormData()
    formData.append('name',name)
    formData.append('type',type)
    formData.append('size',size)
    formData.append('hash',hash)
    formData.append('file',chunk)
    formData.append('offset',uploaded)
    formData.append('index',index)
    axiosArr.push(formData)
    index+=1
    uploaded +=chunk.size


  }

3. Judge whether this file has been uploaded （ That is to say, the upload is suspended in the middle ）

  const local=localStorage.getItem(hash)

4. Continue uploading from the current place

const newDoneArr=[]
    isDoneArr.map((item,index)=>{
    
      if(item===0){
    
        newDoneArr.push(axiosArr[index])
      }
    })
    progress.max=newDoneArr.length-1
    progress.value=0
    multiRequest(newDoneArr,1)

5. Start uploading , Join the queue to be uploaded

function enqueue(queue=[],url){
    
    const len=queue.push(url)  //  Join the queue 
    request(queue,url) //  Request start 
    return len
  }

6. The request is successful , Modify state data

	const result=await axios.post('/api/upload',formData)
    const i=urlsClone.indexOf(formData) //  Which file was uploaded 
    const hash=formData.get('hash') //  Get hash identification 
    localStorage.setItem(hash,i)//  Save the uploaded status 
    result[i]=formData
    isDoneArr[i]=1 //  Modify the status data to complete 

7. Determine whether the upload is complete

function dequeue(queue=[],formData){
    
    progress.value += 1 //  Where is the current upload 
    queue.splice(queue.indexOf(formData),1) //  from queue Remove completed requests from 
    if(uls.length){
     //  If there are still files not uploaded , Continue to upload 
      enqueue(queue,uls.shift())
    }else {
     //  After uploading, you will be prompted 
      if(isDoneArr.indexOf(0)===-1){
    
        output.innerText=' Upload successful '
        progress.value=urlsClone.length
        localStorage.removeItem(formData.get('hash'))
      }
    }
  }

Back end

1. utilize FS The module writes data to the file
2. Resolve the file name first

const {
    name, type, size, offset, hash,index} = req.body

3. write file

 await appendFile(filename, file.data)