Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-05-29 17:36:32
Original
2681 Leute haben es durchsucht

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"/>
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!