标签:
最近正巧需要用到UEditor ,因为需求,。需要把上传的图片数据上传到阿里云的OSS与记录图片到MS SQL中 。
不得已只能翻UEditor的实现代码>_<痛苦。遗憾的是研究了两天也没想明白
备忘笔记:
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(); } });
标签:
原文地址:http://www.cnblogs.com/linqing/p/5922393.html