原版 jasnybootstrap無法進(jìn)行多張圖片上傳后的預(yù)覽，所以借鑒了一些別的方法。

成都創(chuàng)新互聯(lián)公司主營龍州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),龍州h5微信小程序定制開發(fā)搭建,龍州網(wǎng)站營銷推廣歡迎龍州等地區(qū)企業(yè)咨詢

HTML

<v-form class="manage-file" id="manage-file" ref="form">

           <input type="hidden" name="pubprojectid" :value="project.id"></input>

           <div class="form-group">

               <label class="col-xs-3 control-label">項目圖片</label>

               <div class="col-xs-8">

                   <div class="fileinput fileinput-new" data-provides="fileinput">

                       <div>

                           <span class="btn btn-default btn-file">

                           <span class="fileinput-new">選擇文件</span>

                           <span class="fileinput-exists">修改文件</span>

                           <input type="file" multiple name="files" @change="filesChange">

                           </span>

                           <a @click="delFiles" class="btn btn-default fileinput-exists" data-dismiss="fileinput">刪除文件</a>

                       </div>

                   </div>

                   <div class="col-xs-12 padding-0">

                       <div class="fileinput" data-provides="fileinput" v-for="(fileItem, index) in files" style="margin-right: 5px; width: 150px;">

                           <div class="fileinput-new thumbnail" style="width: 150px;">

                               <div class="file" style="width: 100%; margin-bottom: 0;">

                                   <a>

                                   <span class="corner"></span>

                                   <div>

                                       <img :src="picSrc[index]" style="height:120px"></img>

                                   </div>

                                   </a>

                               </div>

                           </div>

                       </div>

                   </div>

               </div>

           </div>

       </v-form>

Vue代碼：

//files 和 imgsrc分開，就可以了

           for (let i = 0; i < e.target.files.length; i++) {

               let picture = e.target.files[i];

               if (picture) {

                   var reader = new FileReader();

                   reader.readAsDataURL(picture);

                   reader.onload = e =>{

                       this.picSrc.push(e.target.result);

                   };

               } else {

                   swal({

                   title: '請選擇上傳圖片',

                   confirmButtonText: '確定',

                   confirmButtonColor: '#294988',

                   type: 'error',

                   });

               }

               picture.uploadDate = new Date();

               this.files.push({pic: picture});

           }

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)頁題目：VuejsjasnyBoostrap上載多張圖片的預(yù)覽效果-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://chinadenli.net/article22/cohscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、軟件開發(fā)、微信小程序、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)