这个问题已经困扰好久了，唉 比较难受，本来学习laravel使用的是Bootstrap，之后用的是Uploadify进行上传图片，无奈，这个技术需要Flash的支持，一直没有实现，后来思考再三，还是选择用Layui后台框架进行设计，emm~毕竟用他的组件可以实现和Uploadify一样的无刷新上传图片的效果，但是比较难受的就是Laravel使用Layui进行回调函数显示图片的时候，Laravel总是莫名的增加了域名之外的控制器及方法名称，比较难受，不，是特别难受，从网上及QQ群大神中也没有问出个所以然，不过，我最后实现的是用的比较笨的方式，就是拼接为字符串的形式进行链接返回调用，（使用前台添加域名的方式实现了emm）好了 话不多说，看看实现的代码吧！
Laravel路由设置
代码语言：javascript复制//用户图片管理设置
Route::get('pic', 'PicController@index');
Route::get('pic/create', 'PicController@create');
//设置文件上传的方法
Route::any('shangchuan', 'CommonController@upload');前台上传及展示效果页面
代码语言：javascript复制<div class="layui-form-item">
<label class="layui-form-label">上传图片</label>
<div class="layui-input-inline">
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload_img">上传图片</button>
</div>
</div>
</div>
<input type="hidden" name="img" value="">
<div class="layui-form-item">
<label class="layui-form-label">图片展示</label>
<div class="layui-input-inline">
<div class="layui-upload-list">
<img class="layui-upload-img admin-pic-create-img" id="pre_img">
<p id="demoText"></p>
</div>
</div>
</div>前台Layui的JS代码设置
代码语言：javascript复制<script type="text/javascript">
/**
* 上传图片操作
*/
layui.use(['form', 'layer', 'upload'],function(){
$ = layui.jquery;
form = layui.form;
layer = layui.layer;
upload = layui.upload;
uploadInst = upload.render({
//绑定元素
elem: '#upload_img',
//绑定laravel CSRF认定
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
//上传接口
url : '/admin/shangchuan',
//上传完毕回调
done : function(res){
var domian = 'http://' window.location.host;
//显示图片
$('#pre_img').attr('src', domian res.msg);
//给img隐藏域赋值，用于提交保存
$('input[name="img"]').val(res.msg);
},
//请求异常回调
error : function(){
layer.msg('请求异常',{'icon':2, 'anim':2});
}
});
});
</script>后端控制器接口设置
也就是在这个控制器中，我直接使用拼接的方式进行链接的拼接，这样就可以避免Laravel自动对JSON返回值自动加前缀的BUG，虽然有点笨，但是解决了这个方法，以后有好的方法在继续更新！！！
代码语言：javascript复制//公共控制器
class CommonController extends Controller
{
//文件上传方法
public function upload(Request $request){
$file = $request->file('file');
if($file == null){
exit(json_encode(array('code'=>1, 'msg'=>'没有上传任何图片文件')));
}
//图片存储根目录
$path = "./uploads";
//获取文件后缀
$ext = $file->getClientOriginalExtension();
//获取文件创建当前日期
$date = date('Ymd');
//新创建文件名及其后缀
$newFile = time().'.'.$ext;
//构造目录
$tree = $path.'/'.$date;
if(file_exists($date)){
mkdir($tree,0777);
}
//将新文件移动至对应文件夹下
$file->move($tree, $newFile);
$imgPath = $tree.'/'.$newFile;
$url = $imgPath;
if($imgPath != null){
exit(json_encode(array('code'=>1, 'msg'=>$url)));
}else{
exit(json_encode(array('code'=>0, 'msg'=>'上传失败')));
}
}
}本文链接：https://cloud.tencent.com/developer/article/1558257
本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接
