Que faire si une erreur de téléchargement de fichier vue se produit

Solution à l'erreur de téléchargement de fichier vue : 1. Créez un projet vue via "vue init webpack demo" ; 2. Ajoutez un élément pour télécharger des fichiers ; 3. Ajoutez la méthode "upload(data)" à la méthode ; FromData pour ajouter les paramètres requis et soumettre la demande à l'aide d'axios.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version vue3, ordinateur DELL G3

Que dois-je faire s'il y a une erreur lors du téléchargement des fichiers vue ?

La solution de Vue en cas d'échec du téléchargement de fichiers

Un collègue qui a développé le front-end dans un projet a utilisé Vue pour développer un module de téléchargement de fichiers, mais quoi qu'il en soit, il était impossible de soumettre cette requête POST au service d'arrière-plan,
Le phénomène spécifique est que lorsque l'interface frontale télécharge des fichiers, le Content-Type est toujours application/x-www-form-urlencoded, puis le service d'arrière-plan de SpringBoot signale une erreur : Current n'est pas un multipart demande. Cela signifie que la demande est erronée.

En fait, lors du téléchargement de fichiers en post, il devrait s'agir de Content-Type : multipart/form-data, mais le front-end est à l'intérieur de l'intranet et est encapsulé. Après analyse et tests, il n'y a aucun problème avec le téléchargement de fichiers en utilisant du HTML ordinaire. Le problème doit résider dans le processus de demande de soumission VUE. Le véritable environnement de développement se trouvant dans l'environnement intranet de l'entreprise et isolé du monde extérieur, j'ai décidé de simuler ce scénario sur mon ordinateur pour faciliter la résolution de problèmes.

Afin d'implémenter cet environnement simulé, vous devez installer un environnement de développement Vue et un environnement de développement Python. Ces deux méthodes d'installation de développement ne sont pas au centre de cet article, elles sont donc ignorées.

Idée générale :

Utilisez Vue pour développer une interface frontale simple pour implémenter la fonction de téléchargement de fichiers, puis utilisez Python pour développer un service back-end Web.

Étape 1 : Créer une page WEB avec Vue

Créer un projet vue :

vue init webpack demo

Pour soumettre une requête en utilisant axios, vous n'avez pas besoin de l'installer, utilisez Importez-le directement

Ouvrez le projet vue nouvellement créé avec VSCode

Ajoutez un élément pour télécharger des fichiers :

<template>
  <div>
    <img  alt="Que faire si une erreur de téléchargement de fichier vue se produit" >
    <router-view></router-view>
    <input>
  </div>
  
</template>
<script></script>
<script>

import axios from &#39;axios&#39;
export default {
  name: &#39;App&#39;
}
</script>

<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Points clés

Puis ajoutez le script de contrôle :

<template>
  <div>
    <img  alt="Que faire si une erreur de téléchargement de fichier vue se produit" >
    <router-view></router-view>
    <input>
  </div>
  
</template>
<script></script>
<script>
import axios from &#39;axios&#39;
export default {
  name: &#39;App&#39;,
    methods:{
    upload(data){
          console.log(&#39;--->&#39;,data)         
          var formData = new FormData();
          formData.append(&#39;side&#39;, &#39;front&#39;);
          formData.append(&#39;file&#39;,data.target.files[0]);
          
          let config = {
             headers: {
               &#39;Content-Type&#39;: &#39;multipart/form-data&#39;             
             }
          };
          axios.post(&#39;http://127.0.0.1:5050/icard/check&#39;,formData,config)
            .then((response) => {
                console.log("OK");
          })
        }  
  }
}</script>

Ajoutez la méthode upload(data) à la méthode

Utilisez FromData pour mettre les paramètres requis. Ajoutez-le et soumettez la demande à l'aide d'axios.

Étape 2 : Développer un service Web simple en Python

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)

#跨域处理
cors = CORS(app, supports_credentials=True)

@app.route('/icard/check',methods=['POST'])
def deal_request1():
    print('收到post请求')
    side = request.form["side"]
    image = request.files.get('file')   
      
    print("side= %s"% (side))
    print("filename= %s"% (image.filename))

    return "OK"

if __name__ == '__main__':   
    app.run(host="127.0.0.1", port=5050)

Le Flask de Python est tout simplement trop pointu, et il est si facile de créer un service WEB simple.

L'idée de base est de créer un service sur le port local 5050. Lorsqu'il y a une requête HTTP pour l'URL http://127.0.0.1:5050/idcard/check, il reçoit les paramètres et imprime les paramètres reçus.

Après avoir démarré dans jupyter, ce qui suit est le suivant :

Après le démarrage, l'invite : Running on http://127.0.0.1:5050/ (Appuyez sur CTRL+C pour quitter)

OK, le simple Le service WEB est démarré, Ensuite, démarrez vue,

Ouvrez le terminal de ligne de commande dans VSCodel, entrez npm run dev pour démarrer,

Puis ouvrez dans le navigateur

https://www.php.cn/link/5ba026c424f718a4808f9d3f75856dab

Parce que c'est le projet initial de vue, donc après l'avoir ouvert, cela ressemble à ceci. Le point clé est que la dernière ligne peut sélectionner le fichier. À ce stade, ouvrez d'abord l'outil de débogage du navigateur, puis sélectionnez un fichier. et regardez les informations dans l'outil de débogage du navigateur. Le point culminant est ici

Parce que dans Une sortie de journal est ajoutée au code de vue : console.log('--->',data)

Vous pouvez donc voir le journal. informations dans le navigateur

Les endroits importants sont marqués de lignes rouges, vous pouvez voir le résultat ici Pour les données de l'événement,

vous pouvez obtenir l'objet fichier qui doit être téléchargé selon event.target.file [0], puis regardez la situation dans le réseau :

Il y a deux lignes d'informations importantes dans l'en-tête de la demande :

  Content-Length: 69392
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundarycgFDx4PDNjkXoSnZ

第一行表示上传的文件大小字节数，
Content-Type代表发送端发送的实体数据的数据类型，如果向服务器端发送的是普通的字符串，默认设置为：text/html;
post请求肯定要发送数据包;
因此对数据包的Type有专门的限定:
Content-Type只能是
application/x-www-form-urlencoded,
application/json
multipart/form-data
或 text/plain中的一种。
其他的均不常见。

在看看服务端的情况：

Web 服务端立即输出了相关信息，说明已经得到了上传文件的数据，这里为了做测试仅仅输出了文件名和另一个参数。
在我的电脑上测试上传文件，接收文件都OK。
然后同事根据我的代码修改了内网VUE工程的代码，问题来了，在内网里上传文件时也用console.log(data)输出了event,但是格式和这里不同哦，这是很大的疑惑或许是环境问题吧，
在我的测试工程中用event.target.file[0]可以得到需要上传的文件对象，但是在内网环境下event里面根本木有target这个节点，根据最后需要的是file节点的特征，在raw节点下找到了file节点，然后代码修改为
 

upload(data){
          console.log('--->',data)         
          var formData = new FormData();
          formData.append('side', 'front');
          formData.append('file',data.raw.files[0]);
          
          let config = {
            // headers: {
            //   'Content-Type': 'multipart/form-data'             
            // }
          };
          axios.post('http://127.0.0.1:5050/icard/check',formData,config)
            .then((response) => {
                console.log("OK");
          })
        }

内网环境下上传文件成功了。并且测试发现，只要这里正确得到了文件对象参数，那么可以不用显式指定Content-Type，这里也会自动把Content-Type设置为multipart/form-data，我不了解Vue底层是如何处理的，可能是发现提交的数据是流，因此把这里的类型自动设置成了multipart/form-data。

 推荐学习：《vue视频教程》

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!