Using iview to upload builds in. NET MVC

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.