div class="container">
<h2>文章添加</h2>
<form action="{{route(‘store‘)}}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="usr">文章标题:</label>
<input type="text" class="form-control" id="usr" name="title">
</div>
<div class="form-group">
<label for="usr">内容:</label>
<input type="text" class="form-control" id="usr" name="desc">
</div>
<div class="form-group">
<div id="picker">选择文件</div>
<input type="hidden" name="file" id="file" value="/image/null.jpg">
<img id="img" style="width: 200px;height: 200px">
</div>
<input type="submit" value="提交">
</form>
</div>
<script>
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: ‘/webuploader/Uploader.swf‘,
// 文件接收服务端。
server: "{{route(‘uploader‘)}}",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: ‘#picker‘,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
formData:{
_token:"{{csrf_token()}}",
type:"post",
}
});
uploader.on( ‘uploadSuccess‘, function( file,res ) {
console.log(res)
$(‘#img‘).attr(‘src‘,res._raw)
$(‘#file‘).val(res._raw)
});
</script>
控制器方法
public function uploader(Request $request)
{
//设置默认保存的路径
$path = "/image/null.jpg";
if ($request->hasFile(‘file‘)){
$path = $request->file(‘file‘)->store(‘‘,‘image‘);
// 修改指定图片的大小
$img = Image::make(‘image/‘.$path)->resize(100, 100);
}
return ‘/image/‘.$path;
}