Beispiel für das Hochladen von Bildern über die Übermittlung von Vue-Axios-Formularen

Im Folgenden werde ich Ihnen ein Beispiel für das Einreichen und Hochladen von Bildern über das Vue-Axios-Formular vorstellen. Es hat einen guten Referenzwert und ich hoffe, es wird für alle hilfreich sein.

Das Element-Framework wird im Projekt verwendet, und dann besteht die Anforderung, dass Bilder hochgeladen werden können oder nicht.

Dann besteht das Problem darin, dass die Upload-Steuerung erfolgt Element hat keine Bilder. Die Übermittlung wird nicht ausgelöst, aber die Schnittstelle ist mit dem Datei-Multipart-/Formulardaten-Empfangsmodus geschrieben

Sie können also nur einen Formular-Upload selbst nachahmen

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

let file = e.target.files[0];    
   let param = new FormData(); //创建form对象 
   param.append('file',file,file.name);//通过append向form对象添加数据 
   param.append('chunk','0');//添加form表单中其他数据 
   
   let config = { 
   headers:{'Content-Type':'multipart/form-data'} 
   }; //添加请求头 
   this.axios.post('http://upload.qiniu.com/',param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es so sein wird hilfreich für Sie in der Zukunft.

Verwandte Artikel:

JavaScript-Code implementiert die Upload-Vorschaufunktion von TXT-Dateien

Angular verwendet den Operationsereignisbefehl ng -Klicken Sie auf Beispiel für die Übergabe mehrerer Parameter

Angular verwendet den Filter Groß-/Kleinschreibung, um ein Beispiel für eine Funktion zur Umwandlung von Groß- und Kleinschreibung zu implementieren

Das obige ist der detaillierte Inhalt vonBeispiel für das Hochladen von Bildern über die Übermittlung von Vue-Axios-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!