Código de exemplo para upload em lote de arquivos com arrastar e soltar HTML5

Este componente é implementado com base em Vue.js. A estrutura da UI é elementUI. O endereço de demonstração completo está em https://github.com/Msxiaoma/upload-folder.

1. Arraste e solte várias pastas ao mesmo tempo
2. Excluir pasta especificada
3. Exibir a barra de progresso do upload da pasta atual
4. Faça upload de pastas superiores a 5 milhões em partes

O efeito é o seguinte:

1. Arraste e solte para ler o caminho do arquivo em cada pasta
2. Como exibir a barra de progresso da pasta atualmente carregada
3. Transporte de cookies entre domínios ao fazer upload de arquivos
4. Fragmentação de pasta

Ao realizar uma operação de arrastar e soltar, o objeto DataTransfer é utilizado para salvar os dados que são arrastados para o navegador por meio da ação arrastar e soltar. Pode salvar um ou mais dados, um ou mais tipos de dados

 // Arrasta a pasta dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// Determine se é uma pasta checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Suporta apenas upload de pastas', 'Prompt', { confirmButtonText: 'OK' }) }}traverseFileTree (item, caminho, parentDir ) { caminho = caminho || '' if (item.isFile) { item.file((arquivo) => { let obj = { arquivo: arquivo, caminho: caminho + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (deixe i = 0; i < entradas.comprimento i++) { entradas[i].attr = item.attr this.traverseFileTree(entradas[i], caminho + item.nome + '/', temp) } }, função (e) { console.log(e) }) }}

Arquivos sem fragmentação: Com base no número total de arquivos na pasta, calcule a porcentagem de cada arquivo na pasta. Quando um arquivo for carregado com sucesso, modifique o processo da pasta;

Arquivos fragmentados: Após calcular a porcentagem de cada arquivo no arquivo, calcule a porcentagem de cada arquivo no arquivo. Após o upload de cada arquivo com sucesso, modifique o processo da pasta.

Quando o servidor define o cabeçalho de resposta

Access-Control-Allow-Origin: Você deve especificar um nome de domínio claro que seja consistente com a página da web solicitada e não possa ser *. Credenciais de controle de acesso-permitir: verdadeiro

Defina cabeçalhos de solicitação:

comCredenciais:verdadeiro

Reabastecer:

substr(start [, length ]) retorna uma substring do comprimento especificado começando na posição especificada.

start: opção obrigatória. A posição inicial da substring desejada. O primeiro caractere da string tem índice 0.

comprimento: opcional. O número de caracteres que devem ser incluídos na substring retornada.

substring retorna a substring localizada na posição especificada no objeto String. Retorna uma string contendo a substring do início ao fim (excluindo o final).

start: indica a posição inicial da substring e o índice começa em 0.

end: Indica a posição final da substring, o índice começa em 0.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.