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