fastadmin的编辑器只有一个是可以远程下载图片的,但功能用起来并不习惯,所以经过修改增加对ueditor编辑器对远程图片下载的功能。分享给大家
在application/admin/controller/cms/Ajax.php增加
use GuzzleHttp\Client;
use Symfony\Component\HttpFoundation\StreamedResponse;
/** * 下载图片 */ public function download() { $url = $this->request->request("url"); $contentType = ''; try { $client = new Client(); $response = $client->request('GET', $url, ['stream' => true, 'verify' => false, 'allow_redirects' => ['strict' => true]]); $body = $response->getBody(); $contentType = $response->getHeader('Content-Type'); $contentType = $contentType[0] ?? 'image/png'; } catch (\Exception $e) { $this->error("图片下载失败"); } $contentTypeArr = explode('/', $contentType); if ($contentTypeArr[0] !== 'image') { $this->error("只支持图片文件"); } $response = new StreamedResponse(function () use ($body) { while (!$body->eof()) { echo $body->read(1024); } }); $response->headers->set('Content-Type', $contentType); $response->send(); return; }在public/assets/js/backend/cms/archives.js的
api: { ... bindevent: function () { ... var getImageFromUrl = function (url, callback) { var req = new XMLHttpRequest(); req.open("GET", Fast.api.fixurl("cms/ajax/download") + "?url=" + encodeURIComponent(url), true); req.responseType = "blob"; req.onload = function (event) { var file; if (req.status >= 200 && req.status < 300 || req.status == 304) { var blob = req.response; var mimetype = blob.type || "image/png"; var mimetypeArr = mimetype.split("/"); if (mimetypeArr[0].toLowerCase() === 'image') { var suffix = ['jpeg', 'jpg', 'bmp', 'gif', 'png', 'webp', 'svg+xml'].indexOf(mimetypeArr[1]) > -1 ? mimetypeArr[1] : 'png'; suffix = suffix == 'svg+xml' ? 'svg' : suffix; var filename = Math.random().toString(36).substring(5, 15) + "." + suffix; file = new File([blob], filename, {type: mimetype}); } } callback.call(this, file); }; req.send(); return; }; //远程图片下载 $(document).on("click", ".btn-localimg", function (a) { var Upload = require('upload'); var that = $("#c-content").val(); var content = $("#c-content").val(); var staging = {}, orgined = {}, index = 0, images = 0, completed = 0, failured = 0; // debugger var checkrestore = function () { if (completed + failured >= images) { $.each(staging, function (i, j) { UE.getEditor("c-content").setContent(that.replace("<code>" + i + "</code>", j)); }); Toastr.info("成功:" + completed + " 失败:" + failured); } // debugger }; content.replace(/<code>([\s\S]*?)<\/code>/g, function (code) { staging[index] = code; return "<code>" + index + "</code>"; // debugger } ); content = content.replace(/<img([\s\S]*?)\ssrc\s*=\s*('|")((http(s?):)([\s\S]*?))('|")([\s\S]*?)[\/]?>/g, function () { images++; var url = arguments[3]; var placeholder = '<img src="' + Config.site.cdnurl + "/assets/img/loading.gif" + '" data-index="' + index + '" />'; //如果是云存储的链接或本地的链接,则忽略 if ((Config.upload.cdnurl && url.indexOf(Config.upload.cdnurl) > -1) || url.indexOf(location.origin) > -1) { completed++; return arguments[0]; } else { orgined[index] = arguments[0]; } var attributes = arguments[1] + " " + arguments[8]; attributes = attributes.replace(/'/g, '"'); // debugger //下载远程图片 (function (index, url, placeholder, attributes) { getImageFromUrl(url, function (file) { if (!file) { failured++; content = content.replace(placeholder, orgined[index]); UE.getEditor("c-content").setContent(content); checkrestore(); } else { Upload.api.send(file, function (data) { completed++; content = content.replace(placeholder, '<img src="' + Fast.api.cdnurl(data.url, true) + '" ' + attributes + ' />'); UE.getEditor("c-content").setContent(content); checkrestore(); // debugger }, function (data) { failured++; content = content.replace(placeholder, orgined[index]); UE.getEditor("c-content").setContent(content); checkrestore(); }); } }); })(index, url, placeholder, attributes); index++; return placeholder; // debugger }); if (index > 0) { UE.getEditor("c-content").setContent(content); // debugger } else { Toastr.info("没有需要下载的远程图片"); } }); } }
//在view中增加按钮
<a href="javascript:" class="btn btn-xs btn-info btn-localimg" data-toggle="tooltip" data-title="远程下载图片"><i class="fa fa-camera"></i> {:__('远程下载图片')}</a> 即可实现远程图片下载功能 当然其他编辑器也可以实现 修改内容写入方法即可