jQuery Medium-Editor-Insert-Plugin 图片上传错误

Question

我正在与 https://github.com/yabwe/medium-editor text-editor and I struggle in particular with its extension https://github.com/orthes/medium-editor-insert-plugin 合作。

我的后端是 Python-Flask

问题是我得到的是这个错误：

medium-editor-insert-plugin.js:1940 -- Uncaught TypeError: Cannot read property 'files' of undefined

这是抛出错误的方法：

/**
 * Callback for successful upload requests.
 * https://github.com/blueimp/jQuery-File-Upload/wiki/Options#done
 *
 * @param {Event} e
 * @param {object} data
 * @return {void}
 */

Images.prototype.uploadDone = function (e, data) {
    $.proxy(this, 'showImage', data.result.files[0].url, data)();

    this.core.clean();
    this.sorting();
};

这是我客户端的jQuery代码：

var editor = new MediumEditor('.forecast-textarea__editor');

      $(function () {
        $('.forecast-textarea__editor').mediumInsert({
          editor: editor,
          addons: {
            images: {
              uploadScript: null,
              deleteScript: null,
              captionPlaceholder: 'Type caption for image',
              styles: {
                slideshow: {
                  label: '<span class="fa fa-play"></span>',
                  added: function ($el) {
                    $el
                      .data('cycle-center-vert', true)
                      .cycle({
                        slides: 'figure'
                      });
                  },
                  removed: function ($el) {
                    $el.cycle('destroy');
                  }
                }
              },
              actions: null,
              fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
                url: '/upload_image', // (string) A relative path to an upload script
                acceptFileTypes: /(\.|\/)(gif|jpeg|jpg|png)$/i // (regexp) Regexp of accepted file types
              }
            }
          }
        })
      });

这是响应 AJAX 调用的后端方法：

@bp.route('/upload_image', methods=['GET', 'POST'])
@login_required
def upload_image():
    if request.method == 'POST':
        files = request.files
        print files
    print 'hello world, you"re uploading image right NOWWNOWNWOW'
    return ('', 204)

感谢您的帮助！

Answer 1

Images.prototype.uploadDone 将运行上传完成后，它期望一个 JSON 中有一个名为 files 的列表作为端点响应，此 files 列表有一个 URL.

现在您将返回状态代码为 204 的空白响应，您可以使用 jsonify 生成 JSON 响应，也可以完全忽略该错误。

JSON范例

@bp.route('/upload_image', methods=['GET', 'POST'])
@login_required
def upload_image():
    if request.method == 'POST':
        files = request.files
        print files
    print 'hello world, you"re uploading image right NOWWNOWNWOW'
    return jsonify(files=[{url='', fileName='Something'}, ]), 204

这是一个 jsonify 的静态数据示例，其中第一个元素的 url 是空白，第一个元素的文件名是名为元组的列表中的某物，这应该可以正常工作！

如果您想生成动态 jsonify 响应，您可能需要从文档中阅读此 link => http://flask.pocoo.org/docs/1.0/api/#flask.json.jsonify

jQuery Medium-Editor-Insert-Plugin 图片上传错误

jQuery Image Upload Error for Medium-Editor-Insert-Plugin

jquery

image-uploading

flask