圖片上傳，配置php以及vue簡單實現

1，php代碼

<?php
header('Access-Control-Allow-Origin:*');
$link = mysqli_connect("localhost","root","123456",'myuser');
mysqli_query($link,"set names utf8");

$_name = $_POST["uName"]; //用戶名

$_imgUrl = $_FILES["uImg"]; 
//數組 [name: "h1.jpg"  type: "image/jpeg"  tmp_name: "C:\Windows\Temp\phpB83A.tmp" error: 0size: 27720]
//重命名圖片：
$extName = explode(".",$_imgUrl["name"]);//??????
$fileExtName = $extName[count($extName)-1]; //獲取擴展名
$fileName = "imgs/".time().".".$fileExtName; //重命名  15756987.jpg  //圖片存儲位置
    
move_uploaded_file($_imgUrl["tmp_name"], $fileName);    

$sql = "insert into mytable(_name,_imgUrl) values('{$_name}','{$fileName}')";
if(mysqli_query($link,$sql)){
    $arr = array("msg"=>"添加成功","code"=>200);
    echo json_encode($arr);
}else{
    $arr = array("msg"=>"no","code"=>300);
    echo json_encode($arr);
}

?>

 

2，vue簡單代碼

<template>
  <div id="app">
    <form class="form" id="formMood" style="margin-top:10px;"> 
       會員名稱:<input type="text" name="uName" id="uName"><br />   

       會員頭像:<input type="file" name="uImg" id="uImg">       
    </form>
    <button class="btn btn-primary" @click="sendMood">添加會員</button>
  </div>
</template>
<script>
//import request from "./request/request.js";
import axios from "axios"
export default {
    data(){
        return({
             page:1
        })
    },
    methods:{
       sendMood(){
       var uName = document.getElementById('uName').value;  //獲取文字
       var uImg = document.getElementById('uImg').files;  //獲取圖片

        //圖片上傳
        var formdata = new FormData(); //創建圖片上傳對象
        formdata.append("uName",uName);   //添加文字
        formdata.append("uImg",uImg[0]); //添加圖片
        //執行上傳
        axios.post("http://localhost:8888/addUserDataPic.php",formdata).then(res=>{
          console.log(res)
        })
       }  
    }
  }
</script>