PHP_thinkphp5选择上传多张图片

桃扇骨 2022-11-15 15:42 188阅读 0赞

.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>上传图片</title>
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'/>
        <script src='https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <van-uploader v-model="fileList" multiple :after-read="afterRead" max-count="10" />
        </div>
    </body>
    </html>
    <script> var vm = new Vue({ el: '#app', data: { fileList: [], }, methods: { afterRead(file) { // 发送 POST 请求 // console.log(this.fileList); let formdata = new FormData(); this.fileList.forEach(item => { formdata.append('image[]',item.file) }); axios({ method: 'post', url: 'http://127.0.0.3/index/index/upload', data: formdata }).then((res) => { console.log(res); }).catch((err) => { }); }, } }); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

index.php

<?php
    namespace app\index\controller;
    use think\Db;
    use think\Controller;
    use think\Request;
    class Index extends \think\Controller
    { 
    	public function index(){ 
    		
    		return 'index';
    	}
    	//图片上传
    	public function upload(){ 
    		//获取当前域名
    		$request = Request::instance();
    		$domain = $request->domain();
    
    		$files = request()->file('image');	//image 前段传递对象流数组
    		// var_dump($files);exit;
    		foreach($files as $file){ 
    		    // 移动到框架应用根目录/public/uploads/ 目录下
    		    $info = $file->move(ROOT_PATH . 'public' . DS . 'upload');
    		    if($info){ 
    		        // 成功上传后 获取上传信息
    		        // 输出 jpg
    		        //echo $info->getExtension(); 
    		        // 输出 42a79759f284b767dfcb2a0197904287.jpg
    		        //echo $info->getFilename();
    				$cover=$info->getSaveName();//将图片的地址定义为$cover存进数据库
    				$data=[
    					'cover'=>$domain."/upload/".$cover	//新增字段 cover
    				];
    				Db::table('img') -> insert($data);	//新增路径到img数据表
    
    				$urlArray[]= $domain."/upload/".$cover;			
    		    }else{ 
    		        // 上传失败获取错误信息
    		        echo $file->getError();
    		    }    
    		}
    		return json($urlArray);
    	}
    }

![在这里插入图片描述][20210402105053138.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221022/6be32c35aee94f8581a754edfef6afd0.png
[20210402105053138.png]: https://img-blog.csdnimg.cn/20210402105053138.png