20200126-laravel图片上传及显示-***线上九期班

图片上传及显示

一、图片上传

1、图片上传代码

<div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
            <form target="img" id="upload_img" enctype="multipart/form-data" method="post" action="/admins/content/upload">
                @csrf
                <input type="file" name="up" id="up" onchange="upload(this)">
            </form>
           <img src="" id="pre_img" alt="" style="width: 200px;height: 150px;">
           <iframe name="img" frameborder="0" style="display: none"></iframe>
           <script>
               function aaa(src){
                   $('#pre_img').attr('src',src);
               }
           </script>
        </div>

2、需要注意的问题

（1）form表单中特殊属性

enctype=”multipart/form-data”，这个属性是一定要有的，另外常见的属性method、action也不能少；

（2）提交时注意iframe内联框架的使用

由于是部分提交，并不是整个文章内容的提交，所以在提交图片的时候不能让页面跳走，所以要使用iframe,这样，form中必须有target属性，其值跟iframe中name属性值必须一致；

（3）iframe不能显示

需要定义其样式style：display:none;

二、服务器端接收及存储

1、接收及存储代码

public function upload(Request $request)
    {
        $path = $request->file('up')->store('public/'.date('Y/m'));
        $url = Storage::url($path);
        $str = '<script>parent.window.aaa("'.$url.'");</script>';
        return $str;
    }

2、注意的问题

（1）file()中的参数

这个参数跟前端input框中的name属性值是相同的；

（2）store()中参数就是存储的路径

这是可以自定义的，但是考虑到使用artisan命令来创建快捷方式的默认路径，所以参数中的这个路径最好是以“public/”开头，当然也可以自定义；

（3）服务器端返回的值

这个值是返回给了iframe，而iframe中并没有引用jquery等，所以只能在iframe外边定义js方法，然后在服务器端来调用（ $str = ‘<script>parent.window.aaa(“‘.$url.’”);</script>‘;）；
前端定义方法，给src赋值
<script>
function aaa(src){
$(‘#pre_img’).attr(‘src’,src);
}
</script>
这样，上传的图片就可以显示出来了。