1、blade 模板，模型关联为空值时，如何传值？
根据 $product->brand的值，显示对应名称
product.blade.php
productitem.blade.php
2、目录权限
在安装 Laravel 后，你可能需要配置一些权限。 storage 和 bootstrap/cache 目录在你的 web 服务下应该是可写的权限，否则 Laravel 将无法运行。如果你用的是 Homestead 虚拟机，这些权限应该已经设置好了。
3、php 安装 fileInfo扩展
4、提示“The Mix manifest does not exist.”
参考：https://xueyuanjun.com/post/19944.html 检查 public目录下是否有mix-manifest.json 文件，没有的话，通过以下步骤生成 1）检查 node，npm是否正确安装。 2）运行 npm install，Windows系统运行 npm install --no-bin-links 3）运行 Mix，npm run production
return json($result);
1、路由
Route::rule('fileUpload/:dir','index/FileUpload/index');
2、页面主要内容
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var imgpath = button.data('imgpath')
var title = button.data('imgtitle')
var info = button.data('productinfo')
var productid = button.data('productid')
if (productid === undefined) {
window.alert("productid 未定义");
}
var modal = $(this)
modal.find('.modal-title').text(title)
//单图
//modal.find('.modal-body img').attr('src',imgpath)
modal.find('.modal-footer .info').text(info)
//设置当前 productid
modal.find('#productid').attr('value', productid)
//设置上传表单productid
modal.find('#productid').attr('value', productid)
//清空元素
modal.find('.carousel-indicators').empty()
modal.find('.carousel-inner').empty()
var productid = $('#productid').attr('value');
var formData = new FormData();
formData.append('productid', productid);
formData.append('refresh', 1);
$.ajax({
type: 'post',
cache: false,
url: '/index.php/fileUpload/product',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
dataType: "json",
success: function (data) {
if (data['status'] == 1) {
var modal = $('#exampleModal')
var images = data['images']// button.data('images')
var init = true;
//重新添加图片
for (var key in images) {
if (init) {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\" class=\"active\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item active\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
init = false;
} else {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
}
}
} else {
alert("更新出错")
}
},
error: function (data) {
alert('更新出错');
}
})
})
$('#submit').on('click', function (event) {
var formData = new FormData();
formData.append('image', $('#file')[0].files[0]);
formData.append('productid', $('#productid').attr('value'));
formData.append('refresh', 0);
$.ajax({
type: 'post',
cache: false,
url: '/index.php/fileUpload/product',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
dataType: "json",
success: function (data) {
if (data['status'] == 1) {
var modal = $('#exampleModal')
var images = data['images']// button.data('images')
//清空元素
modal.find('.carousel-indicators').empty()
modal.find('.carousel-inner').empty()
//重新添加图片
for (var key in images) {
//确保刚上传的文件被激活
if (key == (images.length - 1)) {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\" class=\"active\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item active\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
} else {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
}
}
// alert('上传完成！')
} else {
alert('上传错误')
}
},
error: function (data) {
alert('上传错误');
}
})
})
})
//...
<div class="ProductPreview">
{notempty name='$product.qrcode.file_path')}
<img src="{$product.qrcode.file_path}" data-toggle="modal" data-target="#exampleModal" data-imgpath="{$product.qrcode.file_path}"
data-imgtitle="{$product.name}" data-productinfo="{$product.type.name} / {$product.model}" data-images="{$product.images}"
data-productid="{$product.id}">
</a>
{else/}
<img data-toggle="modal" data-target="#exampleModal" data-imgpath="{$product.qrcode.file_path}" data-imgtitle="{$product.name}"
data-productinfo="{$product.type.name} / {$product.model}" data-images="{$product.images}" data-productid="{$product.id}">
</a>
{/notempty}
</div>
//...
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 单图 -->
<!--
<center><img src="" style="width:auto;height:auto;max-height:300px;max-width:100%;" /></center>
-->
<!-- 多图 -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!--
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-->
</ol>
<div class="carousel-inner">
<!-- 原案例 -->
<!--
<div class="carousel-item active">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
</div>
-->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="PrevIcon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="NextIcon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<center>
<form id="uploadForm" enctype="multipart/form-data">
<div class="input-group">
<input type="file" name="image" class="form-control" id="file" />
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">
<input type="button" value="上传" id="submit" />
<input type="hidden" name="productid" id="productid" value="" />
</div>
</div>
</div>
<br>
</form>
</center>
</div>
<div class="modal-footer">
<h6 class="info">info</h6>
</div>
</div>
</div>
</div>
3、后台
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\File;
use app\index\model\ProductModel;
use app\index\model\ExtraProductModel;
class FileUploadController extends Controller
{
public function index($dir){
$id=request()->param('productid');
$refresh=request()->param('refresh');
$result;
if($refresh==1){
$product=ProductModel::where('id', $id)->find();
$images=$product->images;
$result['status']=1;
$result['images']=$images;
}else{
$file =request()->file('image');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(UPLOAD_PATH.$dir);
if($info){
$extraProduct =new ExtraProductModel();
$extraProduct->name=$info->getFilename();
$extraProduct->file_path='/upload/'.$dir.'/'.$info->getSaveName();
$extraProduct->product_id=$id;
$extraProduct->save();
$product=ProductModel::where('id', $id)->find();
$images=$product->images;
$result['status']=1;
$result['images']=$images;
}else{
$result['status']=0;
}
}else{
$result['status']=0;
}
}
return $result;
}
}
1、移动端手势滑动事件
$(function () {
// 获取手指在轮播图元素上的一个滑动方向（左右）
// 获取界面上轮播图容器
var $carousels = $('.carousel');
var startX,endX;
// 在滑动的一定范围内，才切换图片
var offset = 50;
// 注册滑动事件
$carousels.on('touchstart',function (e) {
// console.log(e);
// 手指触摸开始时记录一下手指所在的坐标x
startX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchmove',function (e) {
// 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
endX = e.originalEvent.touches[0].clientX;
});
$carousels.on('touchend',function (e) {
//console.log(endX);
//结束触摸一瞬间记录手指最后所在坐标x的位置 endX
//比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
var distance = Math.abs(startX - endX);
if (distance > offset){
//说明有方向的变化
//根据获得的方向 判断是上一张还是下一张出现
$(this).carousel(startX >endX ? 'next':'prev');
}
})
});
2、去除 ul li 间的间隔
ul{
list-style-type: none;
margin:0px;
padding:0px;
}
1、活动价标签
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="90%" fx="70%" fy="70%">
<stop offset="0%" style="stop-color:rgb(252, 248, 1);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255, 0, 0);stop-opacity:1" />
</radialGradient>
</defs>
<polygon points="0 0,36 0,0 36" fill="url(#grad1)"/>
<text x="-2" y="-5" transform="rotate(-45 36,0)" style="stroke:none; fill:#fff;">活动价</text>
</svg>
.svg-triangle{
position:absolute;
margin: -6px auto;
width: 36px;
height: 36px;
font-size:8px;
}