.NET MVC 中使用iView上傳組建
阿新 • • 發佈:2017-12-12
name 尺寸 ssa 圖片 初始化 rec make blog ==
最近做上傳模塊中用到了批量相冊管理,使用了iView中的相冊組件,組件文檔地址:https://www.iviewui.com/components/upload
先上個效果圖
主要遇到的難點是對應文檔中的參數不知道如何寫,在群裏熱心人幫助後解決了。具體實現是這樣的,默認上傳直接記錄到數據庫中,日誌添加更新圖片記錄中的日誌編號字段。刪除的時候是當點擊保存後,將刪除的編號由後臺處理,刪除圖片、刪除圖片數據庫記錄。上傳圖片時附帶頁面驗證隱藏域參數,下面附上代碼,純當記錄。
<div id="app"> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === ‘finished‘"> <img :src="item.url"> <div class="demo-upload-list-cover"> <icon type="ios-eye-outline" @@click.native="handleView(item.url)"></icon> <icon type="ios-trash-outline" @@click.native="handleRemove(item)"></icon> </div> </template> <template v-else> <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress> </template> </div> <upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="[‘jpg‘,‘jpeg‘,‘png‘]" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :data="{‘ProjectInfID‘:projectInfID, ‘ProjectLogID‘:projectLogId, ‘__RequestVerificationToken‘:token}" multiple type="drag" name="fileBefore" action="/ProjectBudget/ProjectLog/UploadPic" style="display: inline-block;width:58px;"> <div style="width: 58px;height:58px;line-height: 58px;"> <icon type="camera" size="20"></icon> </div> </upload> <modal title="照片查看" v-model="visible"> <a :href="imgName" target="_blank"><img :src="imgName" v-if="visible" style="width: 100%"></a> </modal> </div>
var token = $("input[name=‘__RequestVerificationToken‘]").val(); //初始化vue相冊,作業前 var Main = { data() { return { defaultList: jsonBefore, projectInfID: ProjectInfID, projectLogId: keyValue, token: token, imgName:‘‘, visible: false, uploadList: [] } }, methods: { handleView(url) { this.imgName = url; this.visible = true; }, handleRemove(file) { deletePicID+= file.name + ‘,‘; const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, handleSuccess(res, file) { file.url = res.message.split(‘|‘)[0]; file.name = res.message.split(‘|‘)[1]; }, handleFormatError(file) { this.$Notice.warning({ title: ‘圖片文件格式不正確‘, desc: ‘不允許上傳格式:‘ + file.name + ‘的圖片,請上傳格式為:jpg 或者 png。‘ }); }, handleMaxSize(file) { this.$Notice.warning({ title: ‘圖片超過允許的大小‘, desc: ‘文件 ‘ + file.name + ‘ 超過2M的限制大小。‘ }); }, handleBeforeUpload() { const check = this.uploadList.length < 10; if (!check) { this.$Notice.warning({ title: ‘最多只能上傳10張圖片。‘ }); } return check; } }, mounted() { this.uploadList = this.$refs.upload.fileList; } } var Component = Vue.extend(Main) new Component().$mount(‘#app‘)
[HttpPost] [ValidateAntiForgeryToken] public ActionResult UploadPic(HttpPostedFileBase fileBefore, HttpPostedFileBase fileAfter, string ProjectInfID, string ProjectLogID) { if (fileBefore != null) { if (!string.Empty.Equals(fileBefore.FileName)) { var fileName = string.Format("{0:yyyyMMddHHmmss}", DateTime.Now) + ".jpg"; UploadPic(fileBefore, fileName); //保存信息 var TempEntity = new ProjectPicEntity(); TempEntity.PicAddress = "/Resource/ProjectLog/" + fileName; TempEntity.PicStyle = (int)ProgressPicStyle.作業前; TempEntity.ProjectLogID = ProjectLogID; TempEntity.ProjectInfID = ProjectInfID; string TempId = ""; if (projectPicApp.AddForm(TempEntity, out TempId) == true) { return Success("/Resource/ProjectLog/" + fileName + "|" + TempId); } else { return Error("上傳失敗"); } } } if (fileAfter != null) { if (!string.Empty.Equals(fileAfter.FileName)) { var fileName = string.Format("{0:yyyyMMddHHmmss}", DateTime.Now) + ".jpg"; UploadPic(fileAfter, fileName); //保存信息 var TempEntity = new ProjectPicEntity(); TempEntity.PicAddress = "/Resource/ProjectLog/" + fileName; TempEntity.PicStyle = (int)ProgressPicStyle.作業後; TempEntity.ProjectLogID = ProjectLogID; TempEntity.ProjectInfID = ProjectInfID; string TempId = ""; if (projectPicApp.AddForm(TempEntity, out TempId) == true) { return Success("/Resource/ProjectLog/" + fileName + "|" + TempId); } else { return Error("上傳失敗"); } } } return Error("上傳失敗"); }
public bool UploadPic(HttpPostedFileBase file, string fileName) { if (file == null) { return false; } try { var filePath = Server.MapPath("~/Resource/ProjectLog/"); if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } string TempPath = Path.Combine(filePath, fileName); file.SaveAs(TempPath); //檢查圖片是否超出最大尺寸、裁切 Thumbnail.MakeThumbnailImage(TempPath, TempPath, 800, 800); //添加時間文字水印 WaterMark.AddImageSignText(TempPath, TempPath, string.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now), 9, 80, "Tahoma", 14); } catch (Exception ex) { Log logHelper = LogFactory.GetLogger(this.GetType().ToString()); logHelper.Error(string.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now) + " 上傳圖片發生異常——" + ex.ToString() + "\r\n\r\n\r\n"); return false; } return true; }
.NET MVC 中使用iView上傳組建