MVC OF UEditor 图片上传- 额外参数 笔记

 

 

最近正巧需要用到UEditor ，因为需求，。需要把上传的图片数据上传到阿里云的OSS与记录图片相关信息到MS SQL中 。

不得已只能翻UEditor的实现代码>_<痛苦。

备忘笔记：

1. 从前端 传入额外参数到UEditor Server：

　　在表单提交时，前端采用ue.execCommand('serverparam', { "key": "value" });可将参数传递给Server中。

在UploadHandler.Cs中使用context.Request["key"] 可获取Value。

 

2.从Server传回参数给前端页面：

　　UEditor 的图片存储函数位于UploadHandler.cs 的Process 之中。

 

    public UploadHandler(HttpContext context, UploadConfig config)
        : base(context)
    {
        this.UploadConfig = config;
        this.Result = new UploadResult() { State = UploadState.Unknown };
    }

    public override void Process()
    {
        byte[] uploadFileBytes = null;
        string uploadFileName = null;

        if (UploadConfig.Base64)
        {
            uploadFileName = UploadConfig.Base64Filename;
            uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
        }
        else
        {
            var file = Request.Files[UploadConfig.UploadFieldName];
            uploadFileName = file.FileName;

            if (!CheckFileType(uploadFileName))
            {
                Result.State = UploadState.TypeNotAllow;
                WriteResult();
                return;
            }
            if (!CheckFileSize(file.ContentLength))
            {
                Result.State = UploadState.SizeLimitExceed;
                WriteResult();
                return;
            }

            uploadFileBytes = new byte[file.ContentLength];
            try
            {
                file.InputStream.Read(uploadFileBytes, 0, file.ContentLength);
            }
            catch (Exception)
            {
                Result.State = UploadState.NetworkError;
                WriteResult();
            }
        }

        Result.OriginFileName = uploadFileName;

        var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);
        var localPath = Server.MapPath(savePath);
        try
        {
            if (!Directory.Exists(Path.GetDirectoryName(localPath)))
            {
                Directory.CreateDirectory(Path.GetDirectoryName(localPath));
            }
            /*这里本来打算改成OSSClient存到阿里云的，因为OSS存储规划没做好，暂时用原有方式存储
*/
            File.WriteAllBytes(localPath, uploadFileBytes);
            Result.Url = savePath;
           //**********************************
            Result.State = UploadState.Success;
        }
        catch (Exception e)
        {
            Result.State = UploadState.FileAccessError;
            Result.ErrorMessage = e.Message;
        }

        try
        {
                //业务Soap服务，把图片信息插入到Sql中并返回相关IDKey
                Result.Id = SOAPAPI.PictureGreate(new Picture()
                {
                    Name = uploadFileName,
                    FilePath = savePath,
                    LocadPath = localPath
                });
        }
        catch (Exception e)
        {
            Result.ErrorMessage = e.Message;
        }
        finally
        {
            WriteResult();
        }
    }
   
    private void WriteResult()
    {
        this.WriteJson(new
        {
            state = GetStateMessage(Result.State),
            url = Result.Url,
            title = Result.OriginFileName,
            original = Result.OriginFileName,
            error = Result.ErrorMessage,
            Id = Result.Id //返回给前台页面插入数据库后的图片ID
        });
    }            

 

然后再改掉，ueditor/Dialog/Image.js 中的OnUploadSuccess事件 就可以轻松的将之前的图片ID传到前端页面啦。

            uploader.on('uploadSuccess', function (file, ret) {
                var $file = $('#' + file.id);
                try {
                    var responseText = (ret._raw || ret),
                        json = utils.str2json(responseText);
                    if (json.state == 'SUCCESS')
                    {
                        _this.imageList[$file.index()] = json;
                        $file.append('<span class="success"></span>');
                        var str = $('body', parent.document).find('#Id').val();
                        if (str != null && str != "")
                        {
                            $('body', parent.document).find('#Id').val((str + "," + json.Id.toString()));
                        }
                        else
                        {
                            $('body', parent.document).find('#Id').val(json.Id.toString());
                        }
                      }   
                    else
                    {
                        $file.find('.error').text(json.state).show();
                    }
                }
                catch (e)
                {
                    $file.find('.error').text(lang.errorServerUpload).show();
                }
                
            });