移動端 input type=‘file‘ 自定義樣式、多圖表單上傳總結
阿新 • • 發佈:2020-07-17
實現效果如下圖:
具體程式碼實現 如下:
setEvaluation.vue(僅包括圖片列表展示 及 自定義上傳按鈕):
<div class="eva_uploadImg"> <div class="eva_loadImgList"> <ul class="clearfix"> <li class="fl eva_myImg" v-for="(item,index) in imgDatas" :key="index" > <img class="eva_imgTips" :src="item" alt=""> <div class="eva_closBtn" v-show="imgDatas" @click="handlerRemoveClick(index)">+</div> </li> <li class="fl" v-show="imgDatas.length<6"> <div class="eva_upLoadBtn" @click.stop="upLoad"> <img class="eva_cameraImg" src="@/assets/image/camera.png" alt=""> <span>新增照片</span> </div> <form action="" enctype='multipart/form-data' method="post" target="uploadFrame"> <input type="file" accept="image/*" mutiple="mutiple" @change="changeImage($event)" ref="avatarInput" id="avatarInput" style="display:none" > </form> <iframe id="uploadFrame" name="uploadFrame" style="display:none;"></iframe> <!--解決form表單提交資料重新整理問題 --> </li> </ul> <span class="eva_imgDataNum">{{imgDatas.length}}/6張</span> </div> </div>
提交按鈕:
<div class="eva_submit" @click.stop="handlerSubmitClick">提交</div>
css樣式彙總:
.eva_uploadImg .eva_loadImgList .eva_myImg border-radius 10px; position:relative; margin: 30px; margin-left:0; &:nth-child(3n) margin-right: 0; .eva_imgTips width: 200px; height 200px; border-radius: 10px; .eva_closBtn width: 50px; height: 50px; position: absolute; top: -20px; right: -20px; font-size: 46px; text-align:center; line-height: 50px; color: #fff; border-radius: 100%; background: rgba(55,55,55,.5); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); .eva_upLoadBtn width: 200px; height: 200px; color: #999; border: 2px dashed #999; background: #F3F3F3; border-radius: 10px; margin: 30px 0; box-sizing: border-box; .eva_cameraImg width: 64px; height: 52px; display:block margin: 50px auto; margin-bottom: 15px; span display:block; font-size:24px; padding:5px 0; text-align: center; .eva_imgDataNum display: block; text-align: right; .eva_submit width: 100%; height:98px; background: #5b3719; color: #fff; font-size: 30px; line-height: 98px; text-align: center; position:fixed; bottom: 0; left: 0; right: 0;
data定義變數:
data(){ return{ orderId:null, evaluationList:[], commonContent:'', imgDatas:[], //儲存上傳的圖片資料 orderItemId:null, filesArr: [], id:null } },
methods裡change事件、提交事件方法實現:
changeImage(e) { // 上傳圖片事件 let files = e.target.files; // 如果沒有選中檔案,直接返回 if (files.length === 0) { return; } if (this.imgDatas.length + files.length > 6) { this.$toast('最多隻能上傳6張圖片!'); return; } let reader; let file; let imgDatas = this.imgDatas; for (let i = 0; i < files.length; i++) { file = files[i]; this.filesArr.push(file); reader = new FileReader(); if (/\.(jpe?g|png|gif)$/i.test(file.name)) { reader.onload = function(e) { // if (imgDatas.indexOf(this.result) === -1) { // 判斷數組裡值相同的無法上傳,具體看自己需求 imgDatas.push(this.result); // } }; reader.readAsDataURL(file); } } e.target.value = ''// 清空value值防止 同一張圖片無法重複提交 }, // 提交 handlerSubmitClick(){ if(this.commonContent.length > 500){ this.$toast('您輸入的內容超出文字限制') }else if(this.commonContent == ''){ this.$toast('評論失敗,文字內容必填哦!') }else if(this.imgDatas.length>0){ /*表單上傳檔案定義例項formData物件*/ var formData = new FormData(); /* this.filesArr 儲存上傳的圖片資料陣列*/ this.filesArr.forEach((file) => { /*遍歷 this.filesArr 新增到 formData物件裡*/ formData.append('upload', file); }); /*formData物件裡 需要傳給後臺其他欄位定義方式*/ formData.append('orderItemId',this.orderItemId); if(this.id != null && this.id != 0){ formData.append('id',this.id) } formData.append('content',this.commonContent); /* 發起請求、將formData物件 傳給後臺*/ axios({ url:urlList.setCommentsInfo, method: 'POST', header:{ 'Authorization': '*****', //此為介面身份認證,具體實現看你們公司具體定義 'content-type': 'multipart/form-data', 'cookie': sessionStorage.getItem("cookieKey"), //讀cookie }, data:formData }).then(res=>{ if(res.data.code == 200){ this.$toast('評論成功') if(this.$route.query.orderId){ this.$router.push({ path:'/orderList', query:{ status:3 } }) }else{; this.$router.go(-1) } }else if(res.data.code == 400){ this.$toast(res.data.data) }else{ this.$toast('伺服器異常,評論失敗') } }) }else{ var params = { orderItemId:this.orderItemId, content:this.commonContent }; this.$http.post(urlList.setCommentsInfo,params).then(res=>{ if(res.data.code == 200){ this.$toast('評論成功'); if(this.$route.query.orderId){ this.$router.push({ path:'/orderList', query:{ status:3 } }) }else{; this.$router.go(-1) } }else if(res.data.code == 400){ this.$toast(res.data.data) }else{ this.$toast('伺服器異常') } }) } }
以上程式碼片段 直接根據自己公司需求改改就可以直接使用。今天就先到這裡了。