PHP_thinkphp5选择上传多张图片

.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>

在这里插入图片描述

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);
	}
}

在这里插入图片描述

PHP_thinkphp5选择上传多张图片

相关文章