zoukankan      html  css  js  c++  java
  • 图片上传,配置php以及vue简单实现

    1,php代码

     1 <?php
     2 header('Access-Control-Allow-Origin:*');
     3 $link = mysqli_connect("localhost","root","123456",'myuser');
     4 mysqli_query($link,"set names utf8");
     5 
     6 $_name = $_POST["uName"]; //用户名
     7 
     8 $_imgUrl = $_FILES["uImg"]; 
     9 //数组 [name: "h1.jpg"  type: "image/jpeg"  tmp_name: "C:WindowsTempphpB83A.tmp" error: 0size: 27720]
    10 //重命名图片:
    11 $extName = explode(".",$_imgUrl["name"]);//??????
    12 $fileExtName = $extName[count($extName)-1]; //获取扩展名
    13 $fileName = "imgs/".time().".".$fileExtName; //重命名  15756987.jpg  //图片存储位置
    14     
    15 move_uploaded_file($_imgUrl["tmp_name"], $fileName);    
    16 
    17 $sql = "insert into mytable(_name,_imgUrl) values('{$_name}','{$fileName}')";
    18 if(mysqli_query($link,$sql)){
    19     $arr = array("msg"=>"添加成功","code"=>200);
    20     echo json_encode($arr);
    21 }else{
    22     $arr = array("msg"=>"no","code"=>300);
    23     echo json_encode($arr);
    24 }
    25 
    26 ?>

    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>
  • 相关阅读:
    redhat 7 配置yum本地源
    redhat 7 安装oracle12.1
    Send Email in Robot Framework Python Using Gmail
    Robot Framework 自定义关键字 Ignore error
    Robot Framework Change chrome language
    Chrome profile manager
    Robot Framework 安装AutoItLibrary
    Robot Framework Chrome
    8 结构型模式-----桥接模式
    7 结构型模式-----适配器模式
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12692103.html
Copyright © 2011-2022 走看看