中型编辑器插入插件的jQuery图像上传错误

时间:2018-09-05 19:30:19

标签: jquery flask image-uploading

我正在与https://github.com/yabwe/medium-editor文本编辑器一起工作,尤其是扩展名https://github.com/orthes/medium-editor-insert-plugin令我感到困惑。

我的后端是Python-Flask

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

  

medium-editor-insert-plugin.js:1940-未捕获的TypeError:无法读取未定义的属性'files'

这是引发错误的方法:

/**
 * 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)

谢谢您的帮助!

1 个答案:

答案 0 :(得分:1)

Images.prototype.uploadDone将在完成上传后运行,它期望其中包含名为files的列表的JSON作为端点响应,此files列表中的每个文件都有一个URL。 / p>

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

JSONify示例

@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为空白,第一个元素的fileName为名为tuple的列表中的内容,这应该可以正常工作!

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

中的此链接