Was tun, wenn beim Hochladen der VUE-Datei ein Fehler auftritt?

Lösung für den Fehler beim Hochladen von Vue-Dateien: 1. Erstellen Sie ein Vue-Projekt über „vue init webpack demo“. 2. Fügen Sie der Methode „upload(data)“ hinzu FromData, um die erforderlichen Parameter hinzuzufügen und die Anfrage mit axios zu senden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, DELL G3-Computer

Was soll ich tun, wenn beim Hochladen von Vue-Dateien ein Fehler auftritt?

Vues Lösung für Datei-Upload-Fehler

Ein Kollege, der das Frontend in einem Projekt entwickelt hat, hat Vue verwendet, um ein Modul zum Hochladen von Dateien zu entwickeln, aber egal was passierte, es war unmöglich, diese POST-Anfrage einzureichen zum Hintergrunddienst,
Das spezifische Phänomen besteht darin, dass beim Hochladen von Dateien über die Front-End-Schnittstelle der Inhaltstyp immer application/x-www-form-urlencoded ist und der Hintergrunddienst von SpringBoot dann einen Fehler meldet: Current ist kein Multipart Anfrage. Dies bedeutet, dass die Anfrage falsch ist.

Tatsächlich sollte es beim Hochladen von Dateien per Post Content-Type: multipart/form-data sein, aber das Frontend befindet sich im Intranet und ist gekapselt. Nach der Analyse und dem Test gibt es kein Problem beim Hochladen einer Datei mit normalem HTML. Das Problem muss im VUE-Übermittlungsanfrageprozess liegen. Da sich die reale Entwicklungsumgebung in der Intranetumgebung des Unternehmens befindet und von der Außenwelt isoliert ist, habe ich beschlossen, dieses Szenario auf meinem Computer zu simulieren, um die Problemlösung zu erleichtern.

Um diese simulierte Umgebung zu implementieren, müssen Sie eine Vue-Entwicklungsumgebung und eine Python-Entwicklungsumgebung installieren. Diese beiden Entwicklungsinstallationsmethoden stehen nicht im Mittelpunkt des Artikels und werden daher übersprungen.

Gesamtidee:

Verwenden Sie Vue, um eine einfache Front-End-Schnittstelle zum Implementieren der Datei-Upload-Funktion zu entwickeln, und verwenden Sie dann Python, um einen Web-Back-End-Dienst zu entwickeln.

Schritt 1: Erstellen Sie eine WEB-Seite mit Vue

Erstellen Sie ein Vue-Projekt:

vue init webpack demo

Um eine Anfrage mit Axios einzureichen, müssen Sie es nicht installieren, verwenden Sie Einfach direkt importieren

Öffnen Sie das neu erstellte Vue-Projekt mit VSCode

Fügen Sie ein Element zum Hochladen von Dateien hinzu:

<template>
  <div>
    <img  src="/static/imghw/default1.png" data-src="./assets/logo.png" class="lazy" alt="Was tun, wenn beim Hochladen der VUE-Datei ein Fehler auftritt?" >
    <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>

Wichtige Punkte

Dann fügen Sie das Steuerskript hinzu:

<template>
  <div>
    <img  src="/static/imghw/default1.png" data-src="./assets/logo.png" class="lazy" alt="Was tun, wenn beim Hochladen der VUE-Datei ein Fehler auftritt?" >
    <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>

Fügen Sie die Methode upload(data) zur Methode hinzu

Verwenden Sie FromData, um die erforderlichen Parameter einzugeben. Fügen Sie es hinzu und senden Sie die Anfrage mit axios.

Schritt 2: Entwickeln Sie einen einfachen Webdienst in 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)

Pythons Flask ist einfach zu scharfsinnig und es ist so einfach, einen einfachen WEB-Dienst zu erstellen.

Die Grundidee besteht darin, einen Dienst auf dem lokalen Port 5050 zu erstellen. Bei einer HTTP-Anfrage für die URL http://127.0.0.1:5050/idcard/check empfängt dieser Parameter und druckt die empfangenen Parameter aus.

Nach dem Start in Jupyter lautet das Folgende:

Nach dem Start erscheint die Eingabeaufforderung: Läuft auf http://127.0.0.1:5050/ (Drücken Sie STRG+C, um den Vorgang zu beenden)

OK, ganz einfach Der WEB-Dienst wird gestartet. Nächster Vue-Start:

Öffnen Sie das Befehlszeilenterminal in VSCdel, geben Sie npm run dev ein, um zu starten.

Dann öffnen Sie ihn im Browser

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

Da es sich um das ursprüngliche Projekt von vue handelt, sieht es nach dem Öffnen so aus. Der entscheidende Punkt ist, dass die letzte Zeile die Datei auswählen kann. Öffnen Sie zu diesem Zeitpunkt zuerst das Browser-Debugging-Tool und wählen Sie dann eine Datei aus und schauen Sie sich die Informationen im Browser-Debugging-Tool an.

Denn in Dem Vue-Code wird eine Protokollausgabe hinzugefügt: console.log('--->',data)

Damit Sie das Protokoll sehen können Informationen im Browser

Die wichtigen Orte sind mit roten Linien markiert, Sie können die Ausgabe hier sehen. Für die Daten im Ereignis

können Sie das Dateiobjekt abrufen, das gemäß event.target.file hochgeladen werden muss [0], und schauen Sie sich dann die Situation im Netzwerk an:

Der Anforderungsheader enthält zwei Zeilen mit wichtigen Informationen:

  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视频教程》

Das obige ist der detaillierte Inhalt vonWas tun, wenn beim Hochladen der VUE-Datei ein Fehler auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!