基于Vue实现微信小程序的图文编辑器

index && pageData.editorData[index].mytype == 1) pageData.editorData[index].font.showcolor = 0; },//上传图片 uploadfile: function (index) { //用于强制重新渲染 input.file 用于清空之前的文件 ^_^ pageData.reload = false; //添加一个组ID，方便后面上传完成后识别应该更新哪条数据 var groupid = guid(); var that = this; var fileid = "file" + index; var files = $("#" + fileid)[0].files; for (var i = 0; i < files.length; i++) { that.itemadd(index + i,2,groupid); } jQuery.ajaxFileUpload({ url: '@Url.Content("~/img/uploadproductdpicArray?path=dyProductImgs")',//用于文件上传的服务器端请求地址 secureuri: false,//是否需要安全协议，一般设置为false fileElementId: fileid,//文件上传域的ID dataType: 'json',//返回值类型 一般设置为json success: function (data) //服务器成功响应处理函数 { //var result = JSON.parse(data); pageData.reload = true; var result = data; console.log(result); if (result.resultState == "1") { var j = 0; for (var i = 0; i < pageData.editorData.length; i++) { if (pageData.editorData[i].groupid && pageData.editorData[i].groupid == groupid) { pageData.editorData[i].content = "@Url.Content("~")" + result.Data[j].substring(1); pageData.editorData[i].loading = 1; j++; } } console.log(result); } else alert("上传失败！"); },error: function (data)//服务器响应失败处理函数 { alert("上传失败！"); } }); },//上升模块 itemup: function (index) { if (index > 0) { var itemData = pageData.editorData[index]; pageData.editorData.splice(index,1); pageData.editorData.splice(index - 1,itemData); } },//下降模块 itembottom: function (index) { if (index + 1 < pageData.editorData.length) { var itemData = pageData.editorData[index]; pageData.editorData.splice(index,1); pageData.editorData.splice(index + 1,//删除模块 itemdel: function (index) { pageData.editorData.splice(index,1); },//添加一个新的模块 itemadd: function (index,type,groupid) { var itemData = null; switch (type) { case 1: itemData = { mytype: 1,content: "",font: { size: 0,//字体大小 每+1 字体+2px -1同减 weight: 0,//是否加粗 del: 0,//是否删除线 line: 0,//是否下划线 center: 0,//是否居中 color: "#000",//字体颜色 bgcolor: "#fff",//字体颜色 showcolor: 0 //是否显示颜色选择框 } }; break; case 2: itemData = { mytype: 2,content: "res/img/1.jpg",loading: 0 //是否已经成功上传 }; break; case 3: itemData = { mytype: 3,content: "" }; break; default: alert('暂不支持'); break; } if (itemData) { if (groupid) itemData.groupid = groupid; pageData.editorData.splice(index,//一个用于阻止冒泡的事件 stopclick: function () { },},//实例被调用后 created: function () { },//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 updated: function () { this.$nextTick(function () { ////console.log(pageData); //var files = this.$refs.feedbakcImg; //for (var i = 0; i < files.length; i++) { // files[i].clearFiles(); //} }) } });

/// 批量上传商品详情图片 /// /// [HttpPost] public ContentResult uploadproductdpicArray(string path) { rData> result = new rData>(); result = UpLoadPicArray(path); if (result.resultState == 1) for (int i = 0; i < result.Data.Count; i++) { if (ST.Tool.ImageHelp.GetImageSuffix(result.Data[i]) != ".gif") { string imgPath = Server.MapPath($"~{result.Data[i]}"); string imgPathNoSuffix = imgPath.Substring(0,imgPath.LastIndexOf(".")); string imgSuffix = ST.Tool.ImageHelp.GetImageSuffix(imgPath); Image oldimg = Image.FromFile(imgPath); //读取图片 //压缩宽度为500的图片，等比 清晰度 100 ST.Tool.ImageHelp.PicThumbnail(oldimg,imgPath + "_E500_100" + imgSuffix,500,100); oldimg.Dispose(); result.Data[i] = result.Data[i] + "_E500_100" + imgSuffix; } } var jsonResult = JsonConvert.SerializeObject(result); return new ContentResult() { Content = jsonResult }; } ///

/// 上传图片 ///

/// /// 保存结果 private rData UpLoadPic(string _path="public") { rData result = new rData(); HttpFileCollectionBase _file = Request.Files; if (_file.Count > 0) { long size = _file[0].ContentLength; string type = _file[0].ContentType; string name = _file[0].FileName; //文件格式 string _tp = Path.GetExtension(name); if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf") { Stream stream = _file[0].InputStream; Image image = Image.FromStream(stream); string dateDir = DateTime.Now.ToString("yyyyMMdd"); string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp; string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/"; string path = Server.MapPath(filePath); if (!Directory.Exists(path)) Directory.CreateDirectory(path); //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}")); //初始化图片对象 //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}")); foreach (var p in image.PropertyItems) { if (p.Id == 0x112) { var rft = p.Value[0] == 6 ? RotateFlipType.Rotate90FlipNone : p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone : p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone : p.Value[0] == 1 ? RotateFlipType.RotateNoneFlipNone : RotateFlipType.RotateNoneFlipNone; p.Value[0] = 0; //旋转属性值设置为不旋转 image.SetPropertyItem(p); //回拷进图片流 image.RotateFlip(rft); } } //重新保存为正常的图片 image.Save(Server.MapPath($"{filePath}{saveName}")); result.Data = $"{filePath}{saveName}"; } else result.errorMsg = "只能上传图片。"; } else result.errorMsg = "未选择文件"; return result; } ///

/// 上传多张图片 ///

/// /// private rData> UpLoadPicArray(string _path = "public") { rData> result = new rData>(); result.Data = new List(); HttpFileCollectionBase _file = Request.Files; if (_file.Count > 0) for (int i = 0; i < _file.Count; i++) { //Thread.Sleep(500); long size = _file[i].ContentLength; string type = _file[i].ContentType; string name = _file[i].FileName; //文件格式 string _tp = Path.GetExtension(name); if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf") { Stream stream = _file[i].InputStream; Image image = Image.FromStream(stream); string dateDir = DateTime.Now.ToString("yyyyMMdd"); string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp; string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/"; string path = Server.MapPath(filePath); if (!Directory.Exists(path)) Directory.CreateDirectory(path); //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}")); //初始化图片对象 //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}")); foreach (var p in image.PropertyItems) { if (p.Id == 0x112) { var rft = p.Value[0] == 6 ? RotateFlipType.Rotate90FlipNone : p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone : p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone : p.Value[0] == 1 ? RotateFlipType.RotateNoneFlipNone : RotateFlipType.RotateNoneFlipNone; p.Value[0] = 0; //旋转属性值设置为不旋转 image.SetPropertyItem(p); //回拷进图片流 image.RotateFlip(rft); } } //重新保存为正常的图片 image.Save(Server.MapPath($"{filePath}{saveName}")); result.Data.Add($"{filePath}{saveName}"); //result.Data = $"{filePath}{saveName}"; } else result.errorMsg = "只能上传图片。"; } else result.errorMsg = "未选择文件"; return result; }