图片上传，配置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>