关键词：
【中文标题】如何将图片从 TinyMCE 上传到 Apollo GraphQL 服务器？【英文标题】：How does one upload an image from TinyMCE to an Apollo GraphQL server? 【发布时间】：2020-06-21 11:20:23 【问题描述】：我为 KeystoneJS 的 AdminUI 编写了一个自定义字段，它使用 TinyMCE 的编辑器。
KeystoneJS 在下面和auto-generates mutations and queries based on your CMS schema 下运行一个 Apollo GraphQL 服务器。 TinyMCE 有capability to enter custom hooks to upload images。
我希望能够将两者连接起来——使用 GraphQL 突变将图像从 TinyMCE 上传到 KeystoneJS 的服务器。
例如，在我的设置中，CMS 中有一个Image 字段。 KeystoneJS 有一个 GraphQL 突变，可以让我上传图片
createImage(data: ImageCreateInput): Image
imageCreateInput在哪里
type ImageCreateInput file: Upload
This tutorial 解释了如何将图像从 Apollo 客户端上传到 Apollo 服务器（KeystoneJS 正在运行）。
const UPLOAD_MUTATION = gql`
mutation submit($file: Upload!)
submitAFile(file: $file)
filename
mimetype
filesize
`;
return (
<form>
<Mutation mutation=UPLOAD_MUTATION update=mutationComplete>
mutation => (
<input
type="file"
onChange=e =>
const [file] = e.target.files;
mutation(
variables:
file
);
/>
)
</Mutation>
</form>
);
对于如何将它集成到 TinyMCE 中，我有点困惑，特别是因为该示例基于使用表单，并且 TinyMCE 将编码的数据发送给我——据我所知——Base64。
TinyMCE 让我有机会指定custom upload handler：
tinymce.init(
selector: 'textarea', // change this value according to your HTML
images_upload_handler: function (blobInfo, success, failure)
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'postAcceptor.php');
xhr.onload = function()
var json;
if (xhr.status != 200)
failure('HTTP Error: ' + xhr.status);
return;
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string')
failure('Invalid JSON: ' + xhr.responseText);
return;
success(json.location);
;
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
);
似乎 TinyMCE 为我提供了一个 blob，据我所知，Apollo Client 需要一个文件名。我只使用 blobInfo.filename 吗？有没有更好的方法将 TinyMCE 图像上传到 GraphQL Apollo 服务器？
我之前从未使用 TinyMCE 上传过任何图片。
【问题讨论】：
【参考方案1】：我也从未使用过这个...但我会尝试使用file_picker_callback。
在这个demo 中，您可以看到files[0] - 我很确定您可以在此处插入以file 作为参数的上传突变调用。结果（url）传递给cb()（如示例）。
同样调整配置为in this answer
【讨论】：
我的印象是“file_picker_callback”只是用来自定义文件选择器对话框本身。不应该使用images_upload_handler (tiny.cloud/docs/configure/file-image-upload/…) 来代替吗？我的想法是，如果有人使用file_picker_callback 上传图片，如果这只是自定义文件选择器对话框，它会继续尝试使用默认值上传图片。
@Cerulean 可用于其他文件处理（例如处理/解析文本文件，将提取的数据插入文本、表格等），而不仅仅是上传。如果回调调用的编辑器插入图像对象 - 进一步的默认处理 - 当然不是强制性的。恕我直言，通过覆盖file_picker_callback，您可以替换/自定义处理链的更大切片（包含默认的images_upload_handler 调用）。您也可以使用文件，而不是 blob。
我可以弄清楚如何使用上述处理程序之一上传图像，但 TinyMCE 期望服务器返回一个对象，location:'path to file', where location` 是填充在对话框选择器的文件名中。但是，我认为 GraphQL 会返回包含在“数据”中的所有内容。有什么办法可以解决 GraphQL 返回的结果与 TinyMCE 所期望的不同的事实吗？我查看了file_picker_callback，但我看不到任何地方可以自定义它。
return location: data.filename ; ? filename 是突变结果属性，如果需要，添加主机/完整路径如何将 2 buildService（上传和标头）添加到 apollo federation？
】如何将2buildService（上传和标头）添加到apollofederation？【英文标题】：HowcanIadd2buildService(uploadandheader)toapollofederation?【发布时间】：2022-01-2208:30:57【问题描述】：在apollofederation中是否有任何选项可以同时添加标头和上传到buildSe... 查看详情
使用 Apollo 客户端将文件上传到 GraphQL
】使用Apollo客户端将文件上传到GraphQL【英文标题】：UploadingafiletoGraphQLusingApolloClient【发布时间】：2020-12-0404:20:32【问题描述】：我目前正在尝试将文件（来自RNCamera的图像）从react本机android应用程序上传到GraphQL后端。但是，后... 查看详情
将图像从 android 上传到 Firebase 后如何获取图像 URL？
】将图像从android上传到Firebase后如何获取图像URL？【英文标题】：HowtoGetImageURLafteruploadinganimageformandroidtoFirebase?【发布时间】：2017-11-2423:31:48【问题描述】：我正在制作一个用户在Firebase存储上上传图片的应用。上传图片后，我... 查看详情
尝试将服务推送到 Apollo Engine 时，如何修复“将服务上传到引擎 → 未知指令“密钥””错误？
】尝试将服务推送到ApolloEngine时，如何修复“将服务上传到引擎→未知指令“密钥””错误？【英文标题】：Howtofix\'UploadingservicetoEngine→Unknowndirective"key"\'errorwhentryingtopushaservicetoApolloEngine?【发布时间】：2020-02-2919:26:34【... 查看详情
如何将 cookie 从 apollo-server 传递到 apollo-clenet
】如何将cookie从apollo-server传递到apollo-clenet【英文标题】：Howtopasscookiefromapollo-servertoapollo-clenet【发布时间】：2020-03-2003:04:26【问题描述】：变异Mutation:signUp:(_,res)=>tryres.cookie("jwt","token",httpOnly:true);return"Amasia";catch( 查看详情
如何将图像从 android 上传到 Cloudinary？
】如何将图像从android上传到Cloudinary？【英文标题】：HowtouploadanimagefromandroidtoCloudinary?【发布时间】：2017-08-0408:09:42【问题描述】：基本上我想做的就是从图库中挑选一张图片，然后将同一张图片上传到我的Cloudinary帐户，我已经... 查看详情
将图片从 URL 上传到 Firebase 存储
...age【发布时间】：2016-10-0718:14:54【问题描述】：我想知道如何通过URL而不是输入（例如）将文件上传到Firebase的存储中。我正在从网站上抓取图像并检索它们的URL。我想通过foreach语句传递这些URL并将它们上传到Firebase的存储中。... 查看详情
将图片从 URL 上传到 Firebase 存储
...age【发布时间】：2020-04-0101:29:03【问题描述】：我想知道如何通过URL而不是输入（例如）将文件上传到Firebase的存储中。我正在从网站上抓取图像并检索它们的URL。我想通过foreach语句传递这些URL并将它们上传到Firebase的存储中。... 查看详情
如何将图片上传到jCrop？
】如何将图片上传到jCrop？【英文标题】：HowtouploadpicturestojCrop?【发布时间】：2013-03-2818:47:01【问题描述】：我使用了从这里找到的代码：http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail，但没有上传功能。如何添加？如果我使用... 查看详情
如何将数据从反应组件传递到 Apollo graphql 查询？
】如何将数据从反应组件传递到Apollographql查询？【英文标题】：HowtopassdatafromreactcomponenttoApollographqlquery?【发布时间】：2018-02-2710:57:42【问题描述】：我正在使用react-native和apollo/graphql开发一个应用程序。在这种情况下，我想做... 查看详情
如何使用 apollo-client 将本机图像反应到服务器
】如何使用apollo-client将本机图像反应到服务器【英文标题】：howtoreactnativeimagestoserverbyuseapollo-client【发布时间】：2021-02-1900:41:06【问题描述】：目前我在react-navie和Strapi中使用apollo-client作为后端。我尝试使用apollo-client将ImageCropP... 查看详情
Winforms：如何使用 C# 将图片上传到 SQL Server 数据库
】Winforms：如何使用C#将图片上传到SQLServer数据库【英文标题】：Winforms:HowtouploadapictureintoSQLServerdatabaseusingC#【发布时间】：2011-01-2320:05:59【问题描述】：我想将图像上传到我的SQLServer数据库。我有两个按钮，一个图片框。使用浏... 查看详情
word里头的图片如何直接复制到tinymce编辑器
Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情
如何从 Node 中的图像 url 将图像上传到 Google Cloud Storage？
】如何从Node中的图像url将图像上传到GoogleCloudStorage？【英文标题】：HowtouploadanimagetoGoogleCloudStoragefromanimageurlinNode?【发布时间】：2016-08-0806:59:22【问题描述】：给定一个图片网址，我如何将该图片上传到GoogleCloudStorage以使用Node.j... 查看详情
如何使用 apollo iOS 客户端上传图片？
】如何使用apolloiOS客户端上传图片？【英文标题】：HowtouploadimageusingapolloiOSclient?【发布时间】：2020-05-2907:24:15【问题描述】：我在iosapollo客户端中上传图片时遇到问题。上传图片后，我收到GraphQlError"createReadStreamisnotafunction"。我... 查看详情
将数据从客户端添加到 Apollo？
...2018-06-2820:48:30【问题描述】：我试图通过React了解Apollo。如何将状态添加到我当地的Apollo商店？我正在使用Meteor。它在客户端提供了一个函数来测试用户是否登录，如果他们使用Meteor.userId()，则返回他们的id。我需要在许多不同... 查看详情
tinymce去除粘帖的格式。以及禁用拖拽图片
...中复制的文本会带有标签格式。。。如何设置在粘帖进入tinymce的时候编程纯文本去掉所有格式。。。。。还有一个，直接将图片拖入tinymce的编辑区。图片会被base64编码呈现出来。我要禁用这一特性。。用户使用图片的话必须上... 查看详情
如何从 iphone sdk 将多个图像上传到 facebook
】如何从iphonesdk将多个图像上传到facebook【英文标题】：Howtouploadmultipleimagestofacebookfromiphonesdk【发布时间】：2012-05-1512:47:51【问题描述】：我想从iphone上传多张图片到Facebook。而且我搜索了很多东西并制作了如下代码：但它不起... 查看详情