Comment implémenter la reprise du point d'arrêt de fichier dans H5

Cette fois, je vais vous montrer comment implémenter le transfert de reprise de point d'arrêt de fichiers dans H5, et quelles sont les précautions sur la façon de reprendre le transfert de point d'arrêt de fichier dans H5. Voici un cas pratique, prenons un. regardez-le ensemble.

L'API FILE de HTML5 a une méthode slice qui peut diviser les BLOBobjets. Le frontal obtient le fichier correspondant via l'objet FileList, divise le gros fichier en segments selon la méthode de division spécifiée, puis le transmet au back-end pièce par pièce, et le back-end assemble les fichiers pièce par pièce dans l'ordre.

Principe de reprise du transfert

Il existe actuellement deux méthodes couramment utilisées pour reprendre le transfert, l'une via l'interface Websocket Téléchargement de fichiers , l'autre via ajax. Les deux méthodes ont leurs propres avantages. Bien que websocket semble plus haut de gamme, à l'exception de l'utilisation de protocoles différents, les autres algorithmes sont fondamentalement très similaires et le service L'interface ws doit être activée. le client. L'ajax relativement pratique est utilisé ici pour illustrer l'idée du téléchargement de point d'arrêt.

Après tout, le contenu principal du téléchargement de CV est de « découper » le fichier, puis de le transférer morceau par morceau sur le serveur. Cependant, ce processus de téléchargement apparemment simple comporte d'innombrables pièges.

La première est l'identification du fichier. Une fois qu'un fichier est divisé en plusieurs parties, comment indiquer au serveur combien de morceaux vous avez coupé et comment le serveur doit finalement fusionner les fichiers que vous avez téléchargés, tout cela doit être fait. être considéré.

Ainsi, avant que le fichier ne commence à être téléchargé, nous devons avoir un processus de « poignée de main » avec le serveur, indiquer au serveur les informations sur le fichier, puis convenir avec le serveur de la taille des tranches après avoir atteint. un consensus avec le serveur, nous pouvons démarrer les fichiers suivants transmis.

Le front-end doit transmettre chaque morceau de fichier au back-end. Après succès, le front-end et le back-end doivent être marqués pour les points d'arrêt ultérieurs.

Lorsque le transfert de fichier est interrompu, l'utilisateur peut sélectionner à nouveau le fichier et utiliser le logo pour déterminer si une partie du fichier a été téléchargée. Si tel est le cas, nous pouvons continuer à télécharger le fichier en fonction du dernier. Progrès pour atteindre la fonction de reprise du téléchargement.

Découpage frontal des fichiers

Avec l'API HTML5 File, couper des fichiers est beaucoup plus simple qu'on ne l'imaginait.

Utilisez simplement la méthode slice

var packet = file.slice(start, end);

Le paramètre start est la position où la tranche commence, et end est la position où la tranche se termine. Les unités sont toutes des octets. En contrôlant le début et la fin, vous pouvez réaliser une segmentation de fichiers

telle que :

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

Téléchargement de fragments de fichiers

Dans la partie précédente, nous avons divisé le fichier en plusieurs morceaux via la méthode slice. La prochaine chose à faire est de transférer ces fragments vers le serveur.

Ici, nous utilisons la post request d'ajax pour implémenter

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez. faites attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication détaillée de la méthode de stockage de H5,

Comment utiliser l'API de vérification de contraintes dans H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!