搭建博客必备:图片拖动文本框自动上传

现在很多小伙伴都在搭建自己的博客,把自己的一些心得和经验都写在博客上面给一些新入门的朋友提供学习的途径,想要搭建一个漂亮实用的博客其实也很简单。

这里我给大家分享一个组件:图片拖动上传到文本框上传,然后自动返回链接,发帖之后可以直接显示图片。

起步

大家都逛过一些社区吧!比如:Laravel-China,我觉得在 laravel-china 无论是发帖和回复评论用户体验都很好。效果图:

file

可以直接把我们想要的图片给拖拽到文本框之中,然后返回返回链接。

file

怎么样,是不是很厉害。今天我们一起来实现一下。

这个组件叫 Inline Attachment,官网地址是:InlineAttachment,然后我们把需要的文件都下载下来。

file

下载完之后里面有一个 demo 文件夹,这里面是使用方法。里面是各种使用方法,如 原生代码调起jquery 调起angularjs 调起

file

Laravel 中使用

我们先引入几个必备文件,它们分别在下载的组件中 src 目录里面,jquery 得自己引入。

file

首先我们得有一个 textarea 文本域

file

然后在 JS 中有如下配置:

file

上面的 options 是这个组件的需要的参数, uploadUrl 是当有图片拖拽到文本域触发一个提交到后台的路由,uploadFieldname 是后台接收参数的时候 key 值:

file

urlText 是指图片上传成功后返回到文本域的值:

file

extraParams 是触发提交到后台的时候携带的额外参数,这里因为 laravel 框架会验证 token 值所以我携带了一个 csrf_token 前端逻辑大概就是这样,更多参数见:文档

后端逻辑编写

其实后端逻辑编写就简单了许多,大家可以当成图片上传方法来处理,唯一值得注意的是,最后的返回值是一个 json 格式的字符串。

    /**
     * 自动上传
     *
     * @param Request $request
     * @return mixed
     */
    public function attachment(Request $request)
    {
        $file = $request->file('image');
        // 图片验证
        $input = array('image' => $file);
        $rules = array(
            'image' => 'image'
        );
        // 自动验证
        $validator = \Validator::make($input, $rules);
        // 失败处理
        if ($validator->fails()) return \Response::json([
            'error' => 'Please choose a picture.'
        ]);
        // 移动目录地址
        $destinationPath = 'uploads/';
        // 获取图片文件名
        $filename = \Auth::user()->id . '_' . time() . $file->getClientOriginalName();
        // 移动图片
        $file->move($destinationPath, $filename);

        return \Response::json([
            'filename' => '/' . $destinationPath . $filename
        ]);
    }

注意:这里返回的 json 格式中名字得和你前端值对应:

file

当然我这里只是把文件给上传到了我项目之中 uploads 文件夹下,你也可以上传到 第三方资源服务器 上,如:oss七牛 等。

最后的效果图:

file

本文为原创文章,手打不易,转载请注明 出处

将来的你一定会感谢现在努力的自己!

本帖由 Summer 于 2年前 加精
Destiny
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 43
Destiny

本人还是觉得这种方式非常简洁,又实用! :punch:

2年前 评论
dividez

me还是觉得这种方式非常简洁,又实用! :punch:

2年前 评论
Destiny

@dividez :+1:

2年前 评论
Summer

觉得这种方式非常简洁,又实用! :punch:

2年前 评论
Destiny

@Summer :punch: 哈哈

2年前 评论

本人还是觉得这种方式非常简洁,又实用! :punch:

2年前 评论
Destiny

专栏了

2年前 评论

好,简洁使用

2年前 评论
Destiny

@kzh4435 嘿嘿,谢谢!

2年前 评论
DukeAnn

editor.md 和这个一起使用冲突吗

2年前 评论
Destiny

@ADKi 不冲突。。。

2年前 评论
DukeAnn

@Destiny 不行拖不进去,初始化哪个都不行

2年前 评论
Destiny

@ADKi 你可能是哪一步有问题,仔细看看,好多朋友都成功过了

2年前 评论
DukeAnn
 <div class="form-group">
          <label>正文</label>
                 <div id="editormd">
                      <textarea style="" id="article_content">{{ $is_edit ? $article->content_md : old('editormd-markdown-doc') }}</textarea>
                   </div>
 </div>
<script type="text/javascript">
        // 拖拽上传
        var inlineAttachmentOptions = {
            uploadUrl: '{{ route('article.uploadImage') }}',
            uploadFieldName: 'editormd-image-file',
            progressText: '![正在上传文件...]()',
            urlText: "\n ![file]({filename}) \n\n",
            extraParams: {
                "_token": '{{ csrf_token() }}'
            }
        };
        $('textarea').inlineattachment(inlineAttachmentOptions);
        // MKDown 编辑器
        $(function() {
            var editor = editormd("editormd");
        });

    </script>
2年前 评论
Destiny

@ADKi 提示什么没?

2年前 评论
DukeAnn

@Destiny 这个MKdown是把text给隐藏了。根本找不到往哪托

2年前 评论
Destiny

@ADKi ..好吧,你先用普通的文本域试试,看看插件好使不

2年前 评论
DukeAnn

@Destiny 插件试了,没问题,因为这个MKDown问题,他实例化的一个div

2年前 评论
Destiny

@ADKi 嗯嗯

2年前 评论

我拖上去还是直接整个页面就显示图片。。。痛苦

2年前 评论
Destiny

@LLLLLLLLLLLLLLLLyw 亲,插件引用正确了吗?

2年前 评论
Fjun

罗彦兄 还用windows本啊 啥时候换Mac :kissing_heart: :bowtie:

2年前 评论
Destiny

@devon

file

file

Windows Mac 都用哈哈哈哈

2年前 评论
Fjun

@Destiny 不错 哈哈

2年前 评论

这种方式非常简洁,又实用! :punch:

2年前 评论

在使用了 https://github.com/sparksuite/simplemde-ma... 编辑器,似乎不能拖拽了

1年前 评论

已解决,引入这个js codemirror.inline-attachment.js 不使用 jquery

1年前 评论
ThinkCsly

很好,谢谢分享。

4个月前 评论
ThinkCsly

@Destiny

路由
file

js插件引入:
file

textarea

file

上传js代码

file

返回结果

file

这个情况有遇见吗是什么?

4个月前 评论
Destiny

@eiomi 这是上传中吧,你network看看是不是有报错

4个月前 评论
ThinkCsly

network没有信息呢

4个月前 评论
ThinkCsly

我直接在textarae原生表单里上传的。

4个月前 评论
ThinkCsly

很平静,没有响应呢
file

file

4个月前 评论
Destiny

@eiomi 在仔细检查一下呢,参考评论区其他伙伴的问题。

4个月前 评论
ThinkCsly

@Destiny 谢谢。

4个月前 评论
ThinkCsly

觉得这种方式非常简洁,又实用! :punch:

4个月前 评论
Destiny

@eiomi :grin: :grin: :grin: :grin:

4个月前 评论
ThinkCsly

@hedeqiang 谢谢啦 :smiley:

4个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!