美文网首页
ueditor前后端分离,出现上传文件时,提示上传错误的解决办法

ueditor前后端分离,出现上传文件时,提示上传错误的解决办法

作者: yangSmallXing | 来源:发表于2019-04-06 21:38 被阅读0次

    就是解决跨域的问题,通过修改源码ueditor.all.js中24506行的方法,替换成:

                domUtils.on(input, 'change', function() {
                    if(!input.value) return;
                    var loadingId = 'loading_' + (+new Date()).toString(36);
                    var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
                    var allowFiles = me.getOpt('imageAllowFiles');
      
                    me.focus();
                    me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
      
                    /!* 判断后端配置是否没有加载成功 *!/
                    if (!me.getOpt('imageActionName')) {
                      errorHandler(me.getLang('autoupload.errorLoadConfig'));
                      return;
                    }
                    // 判断文件格式是否错误
                    var filename = input.value,
                      fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';
                    if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
                      showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                      return;
                    }
      
                    var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                    var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
                    var formData = new FormData();
                    formData.append("upfile", form[0].files[0] );
                    $.ajax({
                      url: action,
                      type: 'POST',
                      cache: false,
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function (data) {
                        data = JSON.parse(data);
                        var link, loader,
                          body = (iframe.contentDocument || iframe.contentWindow.document).body,
                          result = body.innerText || body.textContent || '';
                        link = me.options.imageUrlPrefix + data.url;
      
                        if(data.state == 'SUCCESS' && data.url) {
                          loader = me.document.getElementById(loadingId);
                          loader.setAttribute('src', link);
                          loader.setAttribute('_src', link);
                          loader.setAttribute('title', data.title || '');
                          loader.setAttribute('alt', data.original || '');
                          loader.removeAttribute('id');
                          domUtils.removeClasses(loader, 'loadingclass');
                        } else {
                          showErrorLoader && showErrorLoader(data.state);
                        }
                        form.reset();
                      }
                    });
                    function showErrorLoader(title){
                      if(loadingId) {
                        var loader = me.document.getElementById(loadingId);
                        loader && domUtils.remove(loader);
                        me.fireEvent('showmessage', {
                          'id': loadingId,
                          'content': title,
                          'type': 'error',
                          'timeout': 4000
                        });
                      }
                    }
                  });
    

    注意一个问题,原有的form.submit的表单上传方式,更改为ajax的上传方式,需要引入jqeury。只要在页面中,ueditor.all.js在jquery引入之后就可以了。

    相关文章

      网友评论

          本文标题:ueditor前后端分离,出现上传文件时,提示上传错误的解决办法

          本文链接:https://www.haomeiwen.com/subject/qkfivqtx.html