layui文件上传+Lavarel
1.前端html代码
{{--使用layUI进行图片上传--}}
点击上传图片,或将图片拖拽到此处
{{--使用layUI进行图片上传--}}
{{-- 隐藏域--}}
//name="sql里面的字段"
{{-- 隐藏域--}}
2.前端js代码
//图片拖拽上传
var uploadInst = upload.render({
elem: '#headImg'
, url: "{{url("goods/picAction")}}"
, size: 500
,field: 'pic',
data:{_token:'{{csrf_token()}}'}
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图片链接(base64)
});
}
, done: function (res) {
console.log(res);
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
var demoText = $('#demoText');
// demoText.html('上传成功!!!');
$("#imagepath").val(res.image)
layer.msg("上传成功")
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
element.init();
3.后台php代码
public function picAction(Request $request){
//图片上传处理
$extension = $request->file('pic')->extension(); // 上传文件扩展名
$imgName = time().mt_rand(1000,9999).".".$extension;//图片名称
$path = $request->file('pic')->storeAs("picDir",$imgName);//返回文件路径
return response()->json(['code'=>0,'image'=>$path]);
}