L'application met en œuvre le processus de changement d'avatars sur la page de connexion

1. Demande:

Dans l'opération de connexion de l'application, l'avatar peut être personnalisé et téléchargé en fonction des besoins de l'utilisateur

2. Analyse: pile technologique

  1. .Familiar avec em, rem, flex disposition des terminaux mobiles

  2. .Maîtriser le Javascipt natif

  3. Maîtriser la méthode de requête axios

3. Processus:

  1. Télécharger une photo existante ou prendre une photo
  2. Choisissez l'image et définissez l'image
  3. Mettre à jour l'image

4. Analyse du projet:

1. Télécharger le formulaire de fichier:

<input type="file" accept="image/*" capture="camera" >

a.type = "fichier" formulaire de téléchargement de fichier
b. accept = "image / *" type de fichier de téléchargement
c.capture = "appareil photo" utiliser l'appareil photo du téléphone portable pour filmer

2. Le paramètre de requête est du type FormData

new FormData()

let formData = new FormData()          formData.append('file', e.target.files[0])

1. Télécharger le fichier (télécharger au format binaire)
2. Soumettre le formulaire
3. En savoir plus sur l'interface

  1. Télécharger des photos: interface URL et méthode de demande

2. Obtenez l'URL et la méthode de demande des photos téléchargées

3. Obtenez l'URL et la méthode de demande pour afficher les informations utilisateur

4. Habituellement, les requêtes "axios" sont divisées en "GET" et "POST", il y a aussi une "demande de méthode de mise"

axios.put(url,{
    
    }).then(res => {
    
    })

Configurer l'interception des demandes

axios.interceptors.request.use(function (config) {
    
    
    //在发送之前做些什么
    return config;
}, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
});

Résumé: Ce qui précède est une idée de processus permettant à une application de changer d'avatar sur la page de connexion. Veuillez l'implémenter en conjonction avec l'API.

Bienvenue à rejoindre le groupe pour des discussions techniques, numéro de groupe: 954314851

Insérez la description de l'image ici

Je suppose que tu aimes

Origine blog.csdn.net/weixin_48193717/article/details/108268204
conseillé
Classement