Vuejs jasnyBoostrap 上傳 多張圖片的預覽效果

標籤：vuejs   圖片   上傳   jasnybootstrap   

原版 jasnybootstrap無法進行多張圖片上傳後的預覽，所以借鑒了一些別的方法。

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});

            }

本文出自 “10259463” 部落格，請務必保留此出處http://10269463.blog.51cto.com/10259463/1934774

Vuejs jasnyBoostrap 上傳 多張圖片的預覽效果