Home > Article > Backend Development > .NET MVC uses ueditor to upload pictures
ueditor version: 1.4.3
File reception processing is written in the controller, and the ashx provided by the editor is not used to receive uploaded files
Editor instantiation, because the required editor functions of different pages are different, instantiation When passing in the configuration parameters:
var editor = new baidu.editor.ui.Editor({ toolbars: [["date", "time", "horizontal", "anchor", "spechars", "blockquote", "pagebreak", "bold", "italic", "underline", "strikethrough", "forecolor", "backcolor", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "directionalityltr", "directionalityrtl", "indent", "removeformat", "autotypeset", "formatmatch", "pasteplain"], ["customstyle", "paragraph", "rowspacingbottom", "rowspacingtop", "lineheight", "fontfamily", "fontsize", "imagenone", "inserttable", "deletetable", "mergeright", "mergedown", "splittorows"], ["splittocols", "splittocells", "mergecells", "insertcol", "insertrow", "deletecol", "deleterow", "insertparagraphbeforetable", "fullscreen", "source", "undo", "redo", "insertunorderedlist", "insertorderedlist", "unlink", "link", "cleardoc", "selectall", "searchreplace", "separate", 'simpleupload'] ], serverUrl: '../UploadImage' }); editor.render("Content");
serverUrl is the upload address, which is the action in the controller. The two colons cannot be removed. For example:
noCache=1477646749295. So it is correct to change the serverUrl to '../UploadImage'
action code:
public ActionResult UploadImage() { var action = Request["action"]; var json = ""; if (action == "config") { json =@"{""imageActionName"":""UploadImage"",""imageFieldName"": ""upfile"",""imageCompressEnable"":""true"",""imageCompressBorder"": 1600,""imageInsertAlign"": ""none"",""imageUrlPrefix"": """",""imageAllowFiles"": ["".png"", "".jpg"", "".jpeg"", "".gif"", "".bmp""]}"; } else { var file= Request.Files["upfile"]; var relativePath = AppConfig.GetAppSettingsValue("CustomizeProductMaskImageRelativePath"); var newFileName = string.Concat(DateTime.Now.ToString("yy-MM-dd"), Path.GetExtension(file.FileName)); var savePath = Server.MapPath(relativePath); if (!Directory.Exists(savePath)) { Directory.CreateDirectory(savePath); } relativePath = Path.Combine(relativePath, newFileName); // 合成目标文件路径 var srcFileName = FilePath.CombinePath(savePath, newFileName); // 保存图片 file.SaveAs(srcFileName); var tvcMallImageUrl = ""; // 上传图片到外网服务器 tvcMallImageUrl = ""; json = json + "{\"url\":\"" + tvcMallImageUrl+"\","; json = json + "\"state\":\"SUCCESS\"}"; } return new ContentResult { ContentEncoding = Encoding.UTF8, ContentType = "application/json", Content = json }; }
There is a pitfall in editing and receiving the returned json. If the returned one is
"{\"imageActionName\":\"UploadImage\",\"imageFieldName\": \"upfile\",\"imageCompressEnable\":\"true\",\"imageCompressBorder\": 1600,\"imageInsertAlign\": \"none\",\"imageUrlPrefix\": \"\",\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]}"
an error will be reported when uploading the image: errorHandler is not defined(...)
It is normal to return to
{"imageActionName":"UploadImage","imageFieldName": "upfile","imageCompressEnable":"true","imageCompressBorder": 1600,"imageInsertAlign": "none","imageUrlPrefix": "","imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]}
The following postures are used to return json:
return Content(json, "application/json", Encoding.UTF8); return Json(json,"application/json",Encoding.UTF8,JsonRequestBehavior.AllowGet); return JavaScript(json); return new JsonResult() {ContentEncoding = Encoding.UTF8, ContentType = "application/json", Data = json,JsonRequestBehavior = JsonRequestBehavior.AllowGet}; return new ContentResult { ContentEncoding = Encoding.UTF8, ContentType = "application/json", Content = json };
1, 3, 5. The returned json is displayed in the browser as
{"imageActionName":"UploadImage","imageFieldName": "upfile","imageCompressEnable":"true","imageCompressBorder": 1600,"imageInsertAlign": "none","imageUrlPrefix": "","imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]}
Others are
"{\"imageActionName\":\"UploadImage\",\"imageFieldName\": \"upfile\",\"imageCompressEnable\":\"true\",\"imageCompressBorder\": 1600,\"imageInsertAlign\": \"none\",\"imageUrlPrefix\": \"\",\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]}"