首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Laravel上传TinyMCE图像,不使用文件管理器

的方法如下:

  1. 配置路由:在routes/web.php文件中添加一个POST路由,用于处理上传图片的请求。
代码语言:txt
复制
Route::post('/upload-image', 'ImageController@upload')->name('upload.image');
  1. 创建控制器:使用以下命令创建一个名为ImageController的控制器。
代码语言:txt
复制
php artisan make:controller ImageController
  1. ImageController中添加upload方法,用于处理图片上传逻辑。
代码语言:txt
复制
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    public function upload(Request $request)
    {
        $file = $request->file('image');
        
        // 验证文件是否上传成功
        if ($file->isValid()) {
            // 生成唯一文件名
            $filename = uniqid() . '.' . $file->getClientOriginalExtension();
            
            // 保存文件到指定路径
            Storage::disk('public')->putFileAs('images', $file, $filename);
            
            // 返回图片的URL
            $url = Storage::disk('public')->url('images/' . $filename);
            
            return response()->json(['url' => $url]);
        }
        
        return response()->json(['error' => '文件上传失败']);
    }
}
  1. 配置存储驱动:在.env文件中配置存储驱动为public,并设置存储路径。
代码语言:txt
复制
FILESYSTEM_DRIVER=public
  1. 创建存储链接:使用以下命令创建一个公共存储链接。
代码语言:txt
复制
php artisan storage:link
  1. 前端代码:在使用TinyMCE的页面中,添加一个图片上传按钮,并使用AJAX将图片上传到服务器。
代码语言:txt
复制
<form id="image-upload-form" enctype="multipart/form-data">
    <input type="file" name="image" id="image-input">
</form>

<script>
    document.getElementById('image-input').addEventListener('change', function() {
        var form = document.getElementById('image-upload-form');
        var formData = new FormData(form);
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route('upload.image') }}', true);
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                var imageUrl = response.url;
                
                // 将图片插入到TinyMCE编辑器中
                tinymce.activeEditor.execCommand('mceInsertContent', false, '<img src="' + imageUrl + '">');
            }
        };
        
        xhr.send(formData);
    });
</script>

以上代码实现了使用Laravel上传TinyMCE图像的功能。用户在页面中选择图片后,通过AJAX将图片上传到服务器,并将返回的图片URL插入到TinyMCE编辑器中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

laravel 使用Postman上传多图片

Postman Post请求上传文件 一、选择post请求方式,输入请求地址 二、填写Headers Key:Content-Type Value:multipart/form-data [{“key...Content-Type”,”value”:”multipart/form-data”,”description”:””,”enabled”:true}] 如下图 三、填写body 选择form-data 然后选择文件...file 点击添加文件,最后发送即可 在用Laravel写就接口的时候,不知道怎么测试怎用postmam测试多图上传,查找了很多资料都没明白,资料一般写的都是上传单张图片的示范,特此记录下来。...Laravel后台接口的编写 写的是一段上传相册到服务器的代码,本人才疏学浅,如有错误请指正 /** * 上传相册到服务器,同时相关数据存入数据库 * @param Request $request...images') ) { $images = $request->file('images'); $content = $request->input('content'); //适配单文件和多文件上传

1.4K10

axios 上传文件 封装_使用axios上传文件,如何取消上传

//在data里声明一个source data(){ return{ source:null,//取消上传 } //上传文件 let that = this; let cancelToken =...Content-Type’: ‘multipart/form-data’ }, cancelToken:that.source.token,//取消事件 onUploadProgress(progressEvent){//上传进度条事件...that.modal.formVisible = false; if(that.Axios.isCancel(error)){//主要是这里 util.notification(‘success’, ‘成功’, ‘取消上传镜像操作成功...that = this; if(that.source){//我先判断soucre是否存在,因为如果我打开弹框不作任何操作,点击取消按钮没有这一层判断的话,that.source.cancel(‘取消上传...that.source.cancel(‘取消上传’);//”取消上传”这几个字,会在上面catch()的error中输出的,可以console看一下。

6.2K20

Java使用HttpURLConnection上传文件

从普通Web页面上传文件非常easy。仅仅须要在form标签叫上enctype=”multipart/form-data”就可以,剩余工作便都交给浏览器去完毕数据收集并发送Http请求。...可是假设没有页面的话要怎么上传文件呢? 因为脱离了浏览器的环境,我们就要自己去完毕数据的收集并发送请求。所以就非常麻烦了。...从第六行到第十行和从第十二行到第十六行,各自是上传的两个文件的数据域。 7....filename相应要上传文件名称(包含路径在内)。 8. 第十三行假设是文件就有Content-Type: text/plain。这里上传的是txt文件所以是text/plain。...那么我们仅仅要模拟这个数据,并写入到Http请求中便能实现文件上传。 事实上。在我之前的文章:HttpClient使用具体解释 ,就已经有利用HttpClient工具包上传文件的样例。

1.8K20

使用fileinput插件批量上传文件

使用fileinput插件批量上传文件 前言   最近在做项目的时候涉及文件批量上传使用bootstrap结合fileinput插件批量上传文件!以下是我在使用fileinput上传文件的过程。...//上传文件成功不要反悔带有error键值的json数据 result.put("error","文件上传失败!")...(超过这个大小的文件不能上传成功) 效果预览 未选择文件时 ?...选择上传文件后 ? 文件上传成功 ?...总结   博主也是第一次使用fileinput插件批量上传文件使用流程比较简单,几句js初始化后就可以使用,非常方便,不过值得注意的是文件上传成功后接口返回的json数据键一定不能包含error,否者会被插件判定为文件上传失败

2.9K31

使用Spring Cloud Feign上传文件

最近经常有人问Spring Cloud Feign如何上传文件。有团队的新成员,也有其他公司的兄弟。...本文简单做个总结—— 早期的Spring Cloud中,Feign本身是没有上传文件的能力的(1年之前),要想实现这一点,需要自己去编写 Encoder 去实现上传。现在我们幸福了很多。...因为Feign官方提供了子项目feign-form ,其中实现了上传所需的 Encoder 。 注:笔者测试的版本是Edgware.RELEASE。Camden、Dalston同样适应本文所述。...这样这个Feign Client就能够上传啦。 注意点 @RequestMapping(...)...最好将Hystrix的超时时间设长一点,例如5秒,否则可能文件还没上传完,Hystrix就超时了,从而导致客户端侧的报错。

1.6K90

onedrive for business使用python上传文件

想着不做网盘真的是白瞎了,但是由于oneindex年久失修,最后选择了SpencerWoo大佬的onedrive-vercel-index,但是由于是托管在vercel上面的,没办法像oneindex那样上传文件...获取到了token之后,就可以去调用onedrive for business相关的代码了,由于大于4MB的文件需要创建会话去分片上传,所以这里我写了两个上传方法,大概代码如下: def get_path...上传文件 if __name__ == '__main__': # 上传至onedirve的路径 remote = '/uploads/images/logo.png' # 本地文件路径...file = os.getcwd()+'/images/logo.png' with open(file, 'rb') as f: # 小文件会打印“上传成功”,大文件会显示上传进度条...print(one.upload_file(remote, f.read())) 如无特殊说明《onedrive for business使用python上传文件》为博主MoLeft原创

4.3K50

Laravel5.8使用LayUI上传并显示图片操作

这个问题已经困扰好久了,唉 比较难受,本来学习laravel使用的是Bootstrap,之后用的是Uploadify进行上传图片,无奈,这个技术需要Flash的支持,一直没有实现,后来思考再三,还是选择用...Layui后台框架进行设计,emm~~~毕竟用他的组件可以实现和Uploadify一样的无刷新上传图片的效果,但是比较难受的就是Laravel使用Layui进行回调函数显示图片的时候,Laravel总是莫名的增加了域名之外的控制器及方法名称...,比较难受,,是特别难受,从网上及QQ群大神中也没有问出个所以然,不过,我最后实现的是用的比较笨的方式,就是拼接为字符串的形式进行链接返回调用,(使用前台添加域名的方式实现了emm~~)好了 话不多说...@create'); //设置文件上传的方法 Route::any('shangchuan', 'CommonController@upload'); 前台上传及展示效果页面 <div class="...//公共控制器 class CommonController extends Controller { //<em>文件</em><em>上传</em>方法 public function upload(Request $

2.5K30
领券