项目地址:https://gitee.com/chalkbox/vue_shop
链接地址:http://vue.wuliwu.top/
没有登陆接口,用户可以直接上传图片至服务器文件夹
高清图片获取与数据库,数据库中存放了高清图片的链接地址,使用了七牛云存储链接
后台PHP文件设置了上传图片的大小为2M
高清图片可以点击跳转,获得链接地址,去掉链接地址的后缀就是原图
附上php代码:
![](https://i-blog.csdnimg.cn/blog_migrate/45f4833ecd862f4087e3f41b719beec2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/e3aed3d3d56fd7c9aea29b2943671013.gif)
1 <?php
2 header("Content-type:text/html;charset=utf-8");
3 //接收数据
4 $host = "localhost";
5 $username = 'root';
6 $password = 'root';
7 $db = 'mywu';
8 //插入数据到数据库
9 //1.连接数据库
10 $conn = mysqli_connect($host,$username,$password,$db);
11 if (!$conn) {
12 die('Could not connect: ' . mysqli_error($con));
13 }
14 $usersArr = [];
15 mysqli_set_charset($conn,'utf8');
16 $user_menu = "select * from test";
17 //5.发送sql语句
18 $res = mysqli_query($conn,$user_menu); //结果集的资源
19 //6.将结果集资源转换成数据
20 // $row = $res->fetch_assoc();
21 while($row = $res->fetch_assoc())
22 {
23 $userArr[] = $row;
24 };
25 $jsonencode = json_encode($userArr);
26 echo $jsonencode;
27 ?>
![](https://i-blog.csdnimg.cn/blog_migrate/03eed85399b3cb9c571f067e22b0815d.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a62ff5992142b09c7689859a5838084d.gif)
1 <?php
2 if ((($_FILES["file"]["type"] == "image/gif")
3 || ($_FILES["file"]["type"] == "image/jpeg")
4 || ($_FILES["file"]["type"] == "image/jpg")
5 || ($_FILES["file"]["type"] == "image/pjpeg")
6 || ($_FILES["file"]["type"] == "image/png"))
7 && ($_FILES["file"]["size"] < 2097152))
8 {
9 if ($_FILES["file"]["error"] > 0)
10 {
11 echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
12 }
13 else
14 {
15 echo "Upload: " . $_FILES["file"]["name"] . "<br />";
16 echo "Type: " . $_FILES["file"]["type"] . "<br />";
17 echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
18 echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
19
20 if (file_exists("upload/" . $_FILES["file"]["name"]))
21 {
22 echo $_FILES["file"]["name"] . " already exists. ";
23 }
24 else
25 {
26 $arr=explode(".",$_FILES["file"]["name"]); //根据点来把原文件名打散为数组
27 $hz=$arr[count($arr)-1]; //返回数组中元素的数目,总数目减一得到数组中的末尾字符串从而得到后缀
28
29 $randname=date("Y").date("m").date("d").date("H").date("i").date("s").rand(100, 999).".".$hz;
30 move_uploaded_file($_FILES["file"]["tmp_name"],
31 "../upload/".$randname); //将文件重命名为时间字符串加后缀并存储
32
33 //move_uploaded_file($_FILES["file"]["tmp_name"],
34 //"upload/" . $_FILES["file"]["name"]);
35 //echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
36 }
37 }
38 }
39 else
40 {
41 echo "Invalid file";
42 }
![](https://i-blog.csdnimg.cn/blog_migrate/942bcc9df940285d6caa917f04c0fe12.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/e3e094e22d3ab7788d142429c6c9f209.gif)
1 <?php
2 $files1 = scandir("../upload"); //列出文件夹中的文件名和文件夹名,输出为一个数组.开头会有一个 . 和 ..
3 $upArr = [];
4 foreach($files1 as $A){ //使用foreach循环出文件夹内的数组名
5 if($A != "."&& $A!=".."){ //把 . 和 .. 过滤掉
6 $arrs[] = array("name" => $A ,"img"=>$A); //新建一个数组,数组元素为二维数组(二维数组的name值和img值均为维原数组的值)
7 }
8 }
9 for($i=0;$i<count($arrs);$i++){
10 $upArr[$i] = $arrs[$i]["img"]; //输出一个图片 图片地址为数组的 img 值
11 }
12 rsort($upArr); //以降序对数组排序
13 $jsonencode = json_encode($upArr); //排序后原数组的变量不变,顺序改变
14 //输出变量$jsonencode
15 echo $jsonencode;
16 ?>
高清图片获取两种方式选其一,因为高清图片大小过大,建议放在七牛云/OSS等云存储内用第一种方法,方便用链接直接访问
![](https://i-blog.csdnimg.cn/blog_migrate/6189edfdb2a18834e46ddc46973e447f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/432f96460b3d4fa571ceaf23109f06b9.gif)
1 <?php
2 header("Content-type:text/html;charset=utf-8");
3 //接收数据
4 $host = "localhost";
5 $username = 'root';
6 $password = 'root';
7 $db = 'mywu';
8 //插入数据到数据库
9 //1.连接数据库
10 $conn = mysqli_connect($host,$username,$password,$db);
11 if (!$conn) {
12 die('Could not connect: ' . mysqli_error($con));
13 }
14 $usersArr = [];
15 mysqli_set_charset($conn,'utf8');
16 $user_menu = "select * from HDpic";
17 //5.发送sql语句
18 $res = mysqli_query($conn,$user_menu); //结果集的资源
19 //6.将结果集资源转换成数据
20 // $row = $res->fetch_assoc();
21 while($row = $res->fetch_assoc())
22 {
23 $userArr[] = $row;
24 };
25 $jsonencode = json_encode($userArr);
26 echo $jsonencode;
27 ?>
![](https://i-blog.csdnimg.cn/blog_migrate/b24873b179f71089a5d2136ade37a9f4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6d9051bc1a30f07a17330f8a39d67596.gif)
1 <?php
2 $files1 = scandir("../HDpic"); //列出文件夹中的文件名和文件夹名,输出为一个数组.开头会有一个 . 和 ..
3 $upArr = [];
4 foreach($files1 as $A){ //使用foreach循环出文件夹内的数组名
5 if($A != "."&& $A!=".."){ //把 . 和 .. 过滤掉
6 $arrs[] = array("name" => $A ,"img"=>$A); //新建一个数组,数组元素为二维数组(二维数组的name值和img值均为维原数组的值)
7 }
8 }
9 for($i=0;$i<count($arrs);$i++){
10 $upArr[$i] = $arrs[$i]["img"]; //输出一个图片 图片地址为数组的 img 值
11 }
12 rsort($upArr); //以降序对数组排序
13 $jsonencode = json_encode($upArr); //排序后原数组的变量不变,顺序改变
14 //输出变量$jsonencode
15 echo $jsonencode;
16 ?>