移動端上傳圖片是很常用的功能,這里使用vant-ui實現。
效果如圖
上傳圖片的vue頁面:Customer.vue
html
<div :class="postData.length>4?'upload-img-5':'upload-img-1'"> <p class="p-header">上傳需要找的面料照片:</p> <p style="font-size: 12px">請上傳要找的完整圖案、細節圖、尺寸參照圖、正反面對比等。(最多5張)</p> <div class="posting-uploader"> <div class="posting-uploader-item" v-for="(item,nn) in postData" :key="nn"> <img :src="item.content" alt="圖片" class="imgPreview"> <van-icon name="close" @click="delImg(nn)" class="delte"/> </div> <van-uploader :after-read="onRead" :accept="'image/*'" v-show="postData.length<=4"> <img src="../../assets/img/img1.png" alt="等待傳圖" class="imgPreview"> </van-uploader> </div> </div>
js
delImg (index) { // 刪除指定下標的圖片對象 if (isNaN(index) || index >= this.postData.length) { return false } let tmp = [] for (let i = 0, len = this.postData.length; i < len; i++) { if (this.postData[i] !== this.postData[index]) { tmp.push(this.postData[i]) } } this.postData = tmp }, onRead (file) { // 上傳圖片到圖片服務器 // this.$refs.clothImg.src = file.content this.postData.push(file) // postData是一個數組 let url = API + '/upload?type=99' let fd = new FormData() fd.append('upImgs', file.file) this.axios.post(url, fd, {headers: { 'Content-Type': 'multipart/form-data' }}).then(res => { this.imgUrlListValue.push(res.data.urls[0].image) //這里上傳到指定的圖片服務器,成功后會返回圖片的url }).catch(err => { alert(err) }) },
css
.upload-img-5{ margin: 5px 0 90px 0; } .upload-img-1{ margin: 5px 0 15px 0; }
說明:
1:../../assets/img/img1.png 是一個標識圖
2.使用動態類的樣式 :class="postData.length>4?'upload-img-5':'upload-img-1' "
是為了解決上傳5張圖片后,標識圖作為第六張雖然不顯示,但是會擠占位置的問題。實際上是為了動態改變高度。