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

就是解决跨域的问题,通过修改源码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', '');
  
                /!* 判断后端配置是否没有加载成功 *!/
                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前后端分离,出现上传文件时,提示上传错误的解决办法)