In the recent upload module used in the batch album management, using the iview in the album components, component document address: Https://www.iviewui.com/components/upload
First, last.
The main difficulty is that the parameters in the corresponding document do not know how to write, in the group of enthusiastic people to help solve. Specifically, the default upload is recorded directly into the database, and the log is added to update the log Number field in the picture record. The deletion is when you click Save, the deleted number is processed by the background, delete the picture, delete the picture database record. Upload the image with the page validation hidden domain parameters, the following attached code, pure when recorded.
<div id= "App" > <div class= "demo-upload-list" v-for= "item in Uploadlist" > <template v-if= "Item.status = = = Finished '" > <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":p ercent= "Item.percentage" hide-info& Gt;</i-progress> </template> </div> <uplOad ref= "Upload": show-upload-list= "false":d efault- File-list= "defaultlist": on-success= "handlesuccess" : format= "[' jpg ', ' jpeg ', ' png ']": max-size= "2048": on- Format-error= "Handleformaterror": on-exceeded-size= "Handlemaxsize" : before-upload= "handlebeforeupload":d ata= "{' Projectinfid ':p Rojectinfid, ' Projectlogid ':p rojectlogid, ' __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= "></icon> & lt;/div> </upload> <modal title= "Photo View" v-model= "visible" > <a:href= "imgname" target= "_blank" ></a> </modal> </div>
vartoken = $ ("input[name= ' __requestverificationtoken ')"). Val (); //Initialize Vue album, before Job varMain ={data () {return{defaultlist:jsonbefore, Projectinfid:projectinfid, Proje Ctlogid: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:' Picture file format is incorrect ', desc:' Do not allow upload format: ' + file.name + ' pictures, please upload the format: JPG or PNG. ‘ }); }, Handlemaxsize (file) { This. $Notice. Warning ({title:' Picture exceeds the allowed size ', desc:' file ' + File.name + ' exceeds the limit size of 2M. ‘ }); }, Handlebeforeupload () {const check= This. uploadlist.length < 10; if(!check) { This. $Notice. Warning ({title:' You can upload up to 10 images. ‘ }); } returncheck; }}, mounted () { This. uploadlist = This. $refs. upload.filelist; } } varComponent =vue.extend (Main)NewComponent (). $mount (' #app ')
[HttpPost] [Validateantiforgerytoken] PublicActionResult Uploadpic (HttpPostedFileBase filebefore, HttpPostedFileBase fileafter,stringProjectinfid,stringProjectlogid) { if(Filebefore! =NULL) { if(!string. Empty.equals (Filebefore.filename)) {varFileName =string. Format ("{0:YYYYMMDDHHMMSS}", DateTime.Now) +". jpg"; Uploadpic (Filebefore, fileName); //Save Information varTempentity =Newprojectpicentity (); Tempentity.picaddress="/resource/projectlog/"+FileName; Tempentity.picstyle= (int) Progresspicstyle. Before the operation; Tempentity.projectlogid=Projectlogid; Tempentity.projectinfid=Projectinfid; stringTempid =""; if(Projectpicapp.addform (Tempentity, outtempid) = =true) { returnSuccess ("/resource/projectlog/"+ FileName +"|"+tempid); } Else { returnError ("Upload failed"); } } } if(Fileafter! =NULL) { if(!string. Empty.equals (Fileafter.filename)) {varFileName =string. Format ("{0:YYYYMMDDHHMMSS}", DateTime.Now) +". jpg"; Uploadpic (Fileafter, fileName); //Save Information varTempentity =Newprojectpicentity (); Tempentity.picaddress="/resource/projectlog/"+FileName; Tempentity.picstyle= (int) Progresspicstyle. After the operation; Tempentity.projectlogid=Projectlogid; Tempentity.projectinfid=Projectinfid; stringTempid =""; if(Projectpicapp.addform (Tempentity, outtempid) = =true) { returnSuccess ("/resource/projectlog/"+ FileName +"|"+tempid); } Else { returnError ("Upload failed"); } } } returnError ("Upload failed"); }
Public BOOLUploadpic (httppostedfilebase file,stringfileName) { if(File = =NULL) { return false; } Try { varFilePath = Server.MapPath ("~/resource/projectlog/"); if(!directory.exists (FilePath)) {directory.createdirectory (FilePath); } stringTempPath =Path.Combine (FilePath, fileName); File. SaveAs (TempPath); //Check to see if the picture exceeds the maximum size, cutThumbnail.makethumbnailimage (TempPath, TempPath, -, -); //Add a time text watermarkWatermark.addimagesigntext (TempPath, TempPath,string. Format ("{0:yyyy-mm-dd HH:mm:ss}", DateTime.Now),9, the,"Tahoma", -); } Catch(Exception ex) {Log Loghelper= Logfactory.getlogger ( This. GetType (). ToString ()); Loghelper.error (string. Format ("{0:yyyy-mm-dd HH:mm:ss}", DateTime.Now) +"Upload Image Exception--"+ ex. ToString () +"\r\n\r\n\r\n"); return false; } return true; }
Using iview to upload builds in. NET MVC