laravel框架图片上传(及其他参数)

注意( Laravel中如何避免CSRF攻击) 419报错

post提交
l. 可以通过框架的中间件VerifyCsrfToken.php 将URL添加到except数组中
2. Ajax提交post:
<meta name="csrf-token" content="{{ csrf_token() }}">
然后在Ajax中设置X-CSRF-Token请求头并提交

    //ajaxSetup() 方法为将来的 AJAX 请求设置默认值:
   	 $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });     
前端部分(使用前端框架layui)
<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb">
          <a href="index">0</a>
          <a href="best_pro">1</a>
          <a href="dispatcher">2</a>
          <a><cite>3</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <form class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label"> <span style="color: red;font-size: 20px">*</span>5</label>
                <div class="layui-input-inline">
                    /*下拉框*/
                    <select name="city" lay-verify="required" lay-search>
                        <?php foreach($cates as $cate):?>
                        <option id="cid" value="<?=$cate->id?>"> <?=$cate->name?> </option>
                        <?php endforeach;?>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;font-size: 20px">*</span>6</label>
                <div class="layui-input-inline">
                    <select name="imglist" id="imglist" lay-verify="required" lay-search>
                       <option value="index_img" > 首页图 </option>
                       <option value="list_img"> 列表图 </option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                /*标签名*/
                <label class="layui-form-label"><span style="color: red;font-size: 20px">*</span>图片上传</label>
                <div class="layui-upload">
                    /*上传图片的按钮*/
                    <button type="button" class="layui-btn" id="img">
                        <i class="layui-icon">&#xe67c;</i> IMG
                    </button>&nbsp;
                    /*默认显示示例图片 之后是上传图片的缩略图 */
                    <img class="layui-upload-img " id="demo1" width="5%" src="http://localhost/mycode/storage/app/public/products/ht.png">
                    <p id="demoText"></p>
                </div>
            </div>
        </form>
    </div>
</div>
js部分(图片上传及其他参数)

<script>
        layui.use(['form','upload'], function(){
            var form = layui.form, upload = layui.upload;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            //图片上传
            var imglist = $('#imglist').val();
            var cid = $('#cid').val();
            var uploadInst = upload.render({
                elem: '#img' //绑定元素
                ,type : 'images' 
                ,url: 'pro_img' //上传接口
                ,size: 200 //限制文件大小,单位 KB
                ,before: function (obj) {
                    //其他参数在这里传的
                    this.data = {'cid':cid,'imglist':imglist};
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接(base64)
                    });
                }
                ,done: function(res){
                    //上传成功
                    if (res.code == 0) {
                        return layer.msg('上传成功');
                    } else {
                        layer.msg('上传失败');
                    }
                }
                ,error: function(){
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                    });
                }
            });
        });
    </script>
php部分 (图片存储)
 public function saveFile($savepath="../storage/app/public/products/"){
         $file_name = $_FILES['file']['name'];
         $file_tmp = $_FILES['file']['tmp_name'];
         $file_error = $_FILES['file']['error'];
         if ($file_error > 0) {
             $code = -1;
             $msg = $file_error;
         } else {
             $file_name_arr = explode('.',$file_name);
             //文件名:YmdHis文件名
             //存储的路径
             //存储的url 存储的路径/YmdHis文件名
             $new_file_name = date('YmdHis').'.'.$file_name_arr[1];
             $path = $savepath.date('Ymd')."/";
             $file_path = $path.$new_file_name;
             //判断文件是否存在
             if (file_exists($file_path)) {
                 $code = -2;
                 $msg = '文件已存在';
             } else {
                //文件夹不存在 新建文件夹
                 if (!is_dir($path)) {
                     mkdir($path,0777);
                 }
                 $upload_res = move_uploaded_file($file_tmp,$file_path);
                 if ($upload_res) {
                     $code = 0;
                     $data = $file_path;
                     $msg = '上传成功';
                 } else {
                     $code = -3;
                     $msg = '文件上传失败';
                 }
             }
         }
         return $this->jsonReturn($code,$msg,$data);
     }

   //jsonReturn
    public function jsonReturn($code, $msg = '', $data = []) {
        return [
            'code' => $code,
            'msg' => $msg,
            'data' => $data,
        ];
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值