Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to upload pictures in the Vue page and apply the folding panel". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. The attachment display area code {{FileDivName}} {{item.name}} {{obs.FileType}} * in the Vue page

The Vue project introduces the following UI framework: (if you want to use it, you need to introduce it in main.js first.) IView, MintUI, Vant this code can be used normally as long as you make sure that IView is introduced.

Second, data binding design

Specific not to expand in detail, arrays and through attribute control, very easy to understand.

PngFileArray: [{num: '0mm, name:' vehicle', isshow: localStorage.getItem ("RoleName"). IndexOf ('nameplate inspector')! =-1? True: false, files: [/ / FileFlag://1: picture; 2: video 3. Other {FileType: 'vehicle nameplate picture', Code: '2018, Num: 0, FileFlag: 1, FileObj: [], IsNoFile: true}, {FileType:' frame VIN picture' Code: '207 pictures, Num: 1, FileFlag: 1, FileObj: [], IsNoFile: true}, {FileType:' terminal pictures', Code: '301 pictures, Num: 2 FileFlag: 1, FileObj: [], IsNoFile: true}}, {num: '1miles', name: 'mileage', isshow: localStorage.getItem ("RoleName"). IndexOf ('account Manager')! =-1? True: false, files: [{FileType: 'odometer photo', Code: '701 photo, Num: 3, FileFlag: 1, FileObj: [], IsNoFile: true}]}], III. Binding method

1. Image loading method:

/ / get the picture list getImageList () {this.$indicator.open ({text: 'picture loading...', spinnerType: 'snake'}); let _ this = this; let downRequest = {' crm_vin': this.parms.crm_vin, 'crm_vehiclenumber': this.parms.crm_vehiclenumber} Let imgListParams = {"ImageDownRequest": JSON.stringify (downRequest), "username": localStorage.getItem ("usernameone"), "password": localStorage.getItem ("password")}; console.log ("get picture list parameters:", imgListParams); _ this.$ajax.defaults.headers ['Content-Type'] =' application/x-www-form-urlencoded;' " / / configuration request header this.$ajax.post (this.imageListUrl, this.$qs.stringify (imgListParams)) .then (resdata = > {_ this.$indicator.close (); console.log ("obtained picture list data:", resdata); let data = resdata.data; console.log ("converted picture list data:", data) If (resdata.status! = 200) {_ this.$toast ({message: 'failed to get picture list!' , duration: 3000}); return;} / / clear the original picture list _ this.pngFileArray.forEach ((rr,index,array) = > {for (var file=0;file {console.log (JSON.stringify (err) _ this.$toast ({message: 'upload failed', duration: 1500}); _ this.$indicator.close ();});}

4. Delete picture method

(in this article, only unsubmitted images can be deleted, but not those that have been submitted, that is, those obtained by the initial loading of the page.)

DeleteObsFlie (classify,num,index,id,url) {/ / delete attachment var _ this = this; this.$messagebox.confirm ('are you sure you want to delete this picture?' , "confirm") .then (action = > {var del_param = {"id": id, "url": url}; _ this.$indicator.open ({text: 'delete the picture, please wait a moment.', spinnerType: 'snake'}) _ this.$ajax.defaults.headers ['Content-Type'] =' application/x-www-form-urlencoded;'; / / configuration request header _ this.PromiseCall (_ this.DelImgFilesURL, _ this.$qs.stringify (del_param)) .then (data = > {_ this.$indicator.close (); console.log (JSON.stringify (data) If (data.status! = 200) {_ this.$messagebox.alert ("failed to delete picture", "prompt"); return;} _ this.pngFileArray [parseInt (classify)] .Files [num] .FileObj.splice (index, 1) _ this.$toast ({message: 'picture deleted successfully', duration: 1500});}) .catch (err = > {_ this.doCatch (err)) _ this.$toast ({message: 'failed to delete picture' + err, duration: 1500}); _ this.$indicator.close ();}, IV, CSS style .retuinfo {width: 96%; height: auto; margin-top: 20px; margin-left: 2% Background-color: # F5F7FA; border-radius: 15px;}. TheadInfo-headline {width: 100%; height: 80px; background: # F3F3F3; display: flex; padding-left: 30px; align-items: center; font-size: 28px; color: # 666666; border-radius: 15px;}. TheadInfo-headline span {width: 6px; height: 32px; background: # 5576AB; border-radius 3px: Margin-right: 10px;} .ivu-collapse-header {height: 40px; align-items: center; display: flex;}. Obsfilesdiv {width: 100%; height: auto; margin-top: .5rem; margin-bottom: 50px;} .obsfileslist {width: 100%; height: auto; padding: 0.5rem 0.5remr; background: # fff;}. Obsfilesul {width: 100%; height: auto Padding-bottom: 8px;}. Obsfilesul li {width: 120px; height: 120px; float: left; margin-top: .3rem; overflow: hidden; margin-right: .3rem; border: none;} .obsfilesul li img {width: 100%; height: 100%;} .imglist {width: 100%; margin-top: .5rem; margin-bottom: 6remm;} .modal {background-color: # A9A9A9; position: fixed Z-index: 99; left: 0; top: 0; width: 100%; height: 100%; padding-top: 4remt; / * opacity: 0.5 body / align-items: center; / * elements in the definition body are vertically centered * / justify-content: center; / * elements in the body are horizontally centered. Modal img {animation-name: zoom; animation-duration: 0.6s Display: block; padding: 10px; margin: auto; max-width: 100%; max-height: 100%; box-shadow: 0 2px 6px rgb (0,0,0,0), 0 10px 20px rgb (0,0,0,0); border-radius: 12px; border: 1px solid white; position: absolute; top: 50%; transform: translateY (- 50%);} .showname {width: 100px; height: 60px; position: relative Top:-4.5remt; white-space: normal; word-break: break-all; word-wrap: break-word;}. Wrong_class {width: 30%! important; height: 30%! important; position: relative; top:-3.8 remr; left: 2.6 remr;}. Wrongs_class {width: 4%! important; height: 4%! important; position: relative; / * top:-5.2em * / left: 0.5remt;}

This is the end of the content of "how to upload pictures in Vue page and apply folding panel". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.