Js interdit par défaut de faire glisser des images vers le navigateur pour ouvrir l'événement

Récemment, je développe une démo qui scanne le code-barres d'un produit avec un scanner de codes-barres pour créer un produit , qui utilise le glisser-déposer d'images vers le navigateur pour les télécharger. Pendant l'utilisation, l'utilisateur l'a accidentellement glissé et déposé sur une page autre que le composant de téléchargement , ce qui a déclenché le comportement par défaut du navigateur, ouvert automatiquement la page Web et ouvert l'image, et l'ensemble du processus d'opération serait bloqué, provoquant un très mauvaise situation.expérience. À ce stade, vous devez utiliser le principe de bouillonnement/creusage pour désactiver l'événement d'ouverture d'images par défaut du navigateur.

La page ressemble à ceci :

Le téléchargement utilise le composant de téléchargement d'antd combiné avec le formulaire Form.

Nous pouvons utiliser addEventListener et removeEventListener pour lier et supprimer les écouteurs d'événements pour la page entière.

1. Définissez d'abord une fonction qui empêche l'événement par défaut :

 // 阻止默认事件Function
  forbidDefaultEvent = (e) => {
    e.preventDefault();
  }

2. Ajoutez ensuite un écouteur à l'événement de déplacement de page une fois la page rendue :

componentDidMount = async () => {
    // 禁止浏览器打开拖拽的图片
    document.addEventListener('drop', this.forbidDefaultEvent, false);
    document.addEventListener('dragover', this.forbidDefaultEvent, false);
};

3. Enfin, pensez à désécouter lorsque la page quitte :

componentWillUnmount = async () => {
    document.removeEventListener('drop', this.forbidDefaultEvent, false);
    document.removeEventListener('dragover', this.forbidDefaultEvent, false);
};

Cela empêche parfaitement le navigateur d'ouvrir les images par défaut.