Wie implementiert vue+axios+php die Datei-Upload-Funktion?

Empfehlung: „PHP-Video-Tutorial“

Bei der Formularübermittlung stoßen wir häufig auf einige Anforderungen für die Formularübermittlung, und nach der Kollision zwischen Vues Axios und der hochgeladenen Datei treten keine unterschiedlichen Funken auf. Hören Sie mir nacheinander zu:

Zuerst müssen wir eine Vue-Axios-Formularübermittlung schreiben, also Code:

<template lang="pug">
  p
    input(type="file", ref="yin")
    button(@click="submit()") 点击上传
</template>
<script>
  export default{
    methods: {
      submit(){
        let formdata = new FormData();
        formdata.append(&#39;file&#39;, this.$refs.yin.files[0]);
        this.$axios({
          url: &#39;http://localhost/php/file_upload/file_updata.php&#39;,
          method: &#39;post&#39;,
          data: formdata,
        }).then((res) => {
          console.log(res.data)
        })
      }
    }
  }
</script>

Verwenden Sie die Pug-Vorlage, oder Sie können sie in HTML ändern. Ja, es ist harmlos . Es hängt hauptsächlich vom js-Logikcode ab und übergibt dann den Wert in wamp. Die Datei lautet wie folgt:

<?php
/**
 * Created by PhpStorm.
 * User: DELL
 * Date: 2017/11/23
 * Time: 10:57
 */
header("Access-Control-Allow-Origin:*");
// 响应类型
header(&#39;Access-Control-Allow-Methods:POST&#39;);
// 响应头设置
header(&#39;Access-Control-Allow-Headers:x-requested-with, content-type&#39;);
header("Content-type: text/html; charset=utf-8");
$file = $_FILES["file"];
if ($file["error"] > 0) {
    echo "错误：" . $file["error"];
} else {
    $name = iconv(&#39;utf-8&#39;, &#39;gb2312&#39;, "upload/" . $file["name"]);
    echo "文件名称：" . $file["name"] . "</br>";
    echo "文件类型：" . $file["type"] . "</br>";
    echo "文件大小：" . ($file["size"] / 1024) . "K</br>";
    echo "文件临时存储的位置：" . $file["tmp_name"] . "</br>";


    //保存上传的文件
    if (file_exists("upload" . $file["name"])) {
        echo $file["name"] . "文件已经存在";
    } else {
        //如果目录不存在则将该文件上传
        if (move_uploaded_file($file[&#39;tmp_name&#39;], $name)) {
            move_uploaded_file($file[&#39;tmp_name&#39;], "upload/" . $file["name"]);
        }
    }
}

　

Um es zu lesen, machen Sie sich die Struktur klar, sonst kann die hochgeladene Datei nicht gespeichert werden

Die Header-Informationen in PHP lösen das domänenübergreifende Problem und die UTF-8-Transkodierung löst das verstümmelte Problem und fügt dann die erhaltene Datei in den Upload ein Ordner;

lauten wie folgt:

Perfekt

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

Vue-Tutorial-Empfehlungen: Die Neueste 5 im Jahr 2020 Auswahl an vue.js-Video-Tutorials

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt vonWie implementiert vue+axios+php die Datei-Upload-Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!