tineMCE 踩坑:images_upload_handler

tineMCE 的官方示例提供了前端上传图片方法 images_upload_handler 的写法。

但官方写的有点问题,上传会报错。

不过修改也很简单:

images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'http://localhost/oasis_publish_test_php/index.php/upload/upImg');

    xhr.onload = function() {
      var json;

      if (xhr.status < 200 || xhr.status >= 300) {
        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());

    xhr.send(formData);
  }

标红的部分就是修改的部分。

转载于:https://www.cnblogs.com/foxcharon/p/9710629.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 Vue Tinymce 富文本编辑器,你可以通过设置 `images_upload_handler` 方法上传图片。以下是上传图片的示例代码: ```javascript <template> <div> <editor api-key="your_api_key" :init="init" :images_upload_handler="imagesUploadHandler" ></editor> </div> </template> <script> import Editor from '@tinymce/tinymce-vue'; export default { components: { Editor }, data() { return { init: { height: 500, plugins: 'image', toolbar: 'image', images_upload_url: 'your_upload_url', images_upload_credentials: true } } }, methods: { imagesUploadHandler(blobInfo, success, failure) { const formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); // 发送 POST 请求来上传图片 this.$axios.post('your_upload_url', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { // 上传成功,返回图片 URL success(response.data.url); }) .catch(error => { // 上传失败,返回错误信息 failure(error.message); }); } } }; </script> ``` 在上述代码中,`images_upload_url` 属性指定了上传图片的 URL,`imagesUploadHandler` 方法负责将图片上传到服务器。该方法接收三个参数: - `blobInfo`:包含要上传的图片数据; - `success`:上传成功时调用的回调函数,需要传入上传的图片 URL; - `failure`:上传失败时调用的回调函数,需要传入错误信息。 你需要发送一个 POST 请求来上传图片,然后在成功时调用 `success` 函数并传入图片 URL,在失败时调用 `failure` 函数并传入错误信息。上传图片的具体实现方式取决于你的服务器端实现,可以使用任何你熟悉的技术栈来完成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值