How does vue+axios+php implement the file upload function?

Recommended: "PHP Video Tutorial"

When we are doing form submission, we often encounter some form submission requirements, then Will there be any different sparks after the axios of vue collides with the uploaded file? Listen to me one by one:

First of all, we need to write a form submission of axios of vue, because I use webpack, so 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>

Use the pug template, you can also change it to HTML, it’s harmless. It mainly depends on the js logic code. First declare a FormData object, and then pass the value in post. At this time The url is a PHP file I use in wamp. The file is as follows:

<?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"]);
        }
    }
}

　

Be sure to see the structure clearly, otherwise the uploaded file cannot be saved,

The header information in PHP solves the cross-domain problem and utf-8 transcoding solves the garbled problem, and then puts the obtained file into the upload folder;

is as follows:

Perfect

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How does vue+axios+php implement the file upload function?. For more information, please follow other related articles on the PHP Chinese website!