如何在vue項(xiàng)目中使用圖片上傳組件？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、西雙版納網(wǎng)站維護(hù)、網(wǎng)站推廣。

<template>
 <div class="uploadImg">
 <div class="upload-content">
  <div class="upload-title">
  <p>{{upTitle}}</p>
  <p class="show-num">{{upNum}}/{{uploadNum}}</p>
  </div>
  <ul class="img-list">
  <li class="show-img" v-for="(item, index) in imgList" :key="index">
   <img :src="item" alt="">
   <kk-icon :class="isDel == true ? '' : 'hide-del'" name="error" color="#FF685D" size="0.4rem" @click.native="delImg(index)"></kk-icon>
  </li>
  <div class="uploadSec">
   <img :src="globalPath+'img/insurance/upload.png'" alt="上傳圖標(biāo)">
   <input type="file" value="" id="choose" @change='onUpload' multiple>
  </div>
  </ul>
 </div>
 </div>
</template>

上面代碼中的kk-icon是自定義的圖標(biāo)組件，只是多了個(gè)接受顏色和大小的功能，你們自己寫一個(gè)替換就行了。然后動(dòng)態(tài)定義它的class，實(shí)現(xiàn)顯隱就結(jié)束了。

隨手貼個(gè)樣式

<style lang="less" type="text/less" rel="stylesheet/less">
 .uploadImg{
 text-align: left;
 .upload-content{
  margin-left: 0.3rem;
  .upload-title{
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.3rem 0.3rem 0;
  .show-num{
   color: #c9c9c9;
  }
  }
  .img-list{
  display: inline-block;
  margin: 0.6rem 0.3rem 0.3rem 0;
  .show-img{
   position: relative;
   display: inline-block;
   margin-right: 0.12rem;
   height: 1.3rem;
   width: 1.3rem;
   img{
   width: 100%;
   height: 100%;
   }
   .hide-del{
   display: none;
   }
   .yd-icon-error{
   position: absolute;
   top: 0;
   right: 0;
   }
  }
  .uploadSec{
   position: relative;
   display: inline-block;
   width: 1.3rem;
   height: 1.3rem;
   overflow: hidden;
   img{
   width: 100%;
   height: 100%;
   }
   #choose{
   position: absolute;
   height: 100%;
   left: 0;
   top: 0;
   opacity: 0;
   }
  }
  }
 }
 }
</style>

接下來看看實(shí)現(xiàn)邏輯

借助input type="file"實(shí)現(xiàn)圖片選擇，是否允許多選圖片的話是通過給input的multiple屬性。（其他直接備注在里面了）
在組件中接收父組件傳來的圖片數(shù)量限制，是否開啟刪除操作，上傳圖片地址，預(yù)覽地址等

props: ['imgNum','title','upUrl','showUrl','showDel'],

title 上傳組件的標(biāo)題
imgNum 上傳圖片數(shù)量限制
upUrl 設(shè)置上傳圖片地址
showUrl設(shè)置圖片回顯地址
showDel是否允許刪除圖片
changeNum 圖片改變時(shí)，觸發(fā)父組件中的方法

當(dāng)選擇圖片確定后就會(huì)觸發(fā)change，因此我在@change="onUpload" 進(jìn)行上傳，上傳使用了formData

// 上傳操作
onUpload (e) {
 let photoFile = e.target
 let val = e.target.value
 // 判斷是否符合上傳條件
 if (photoFile.files.length === 0) return false
 for (let i = 0; i < photoFile.files.length; i++) {
 this.fileAdd(photoFile.files[i],i)
 }
}

上傳操作中觸發(fā)圖片后續(xù)處理方法fileAdd

因?yàn)楹笈_(tái)要求拿到的圖片地址是一串字符串，所以我在下面中使用join() 進(jìn)行數(shù)組轉(zhuǎn)化處理（因?yàn)楹笈_(tái)不支持接受圖片數(shù)組，因此我這個(gè)上傳多選圖片之后上傳也是單張上傳）

// 添加圖片
fileAdd (file,index) {
 let csrf_token = this.getCookie('XSRF-TOKEN');
 let formFile = new FormData();
 let imgName = 'img0';
 formFile.append(imgName, file);
 formFile.append("_token", csrf_token);
 let name = file.name
 let size = file.size
 let types = '.jpg,.jpeg,.png,.gif' //文件格式
 let fileExt = name.substring(name.lastIndexOf('.')).toLowerCase()
 let result = types.indexOf(fileExt)
 if (result < 0) {  //驗(yàn)證圖片格式
 this.$dialog.toast({
  mes: '圖片格式不正確',
  timeout: 1000
 })
 return false
 }
 if (size > 1 * 1024 * 1024) {
 this.$dialog.toast({
  mes: '圖片大小不能大于1M',
  timeout: 1000
 })
 return false
 }
 if (this.fileList.length >= this.uploadNum) {
 this.$dialog.toast({
  mes: '圖片最多只能上傳' + this.uploadNum + '張',
  timeout: 1000
 })
 return false
 }

 axios.post(this.upUrl,formFile)
 .then((res) => {
  this.upNum = this.fileList.length + 1; //計(jì)算圖片數(shù)量
  this.fileList.push(file);    //添加進(jìn)圖片數(shù)組
  let imgUrl = this.showUrl + res.data.data; //圖片回顯地址
  let upImg = res.data.data;    //傳給后臺(tái)的圖片地址
  this.imgList.push(imgUrl);
  this.upImgList.push(upImg);
  let upImgAll = this.upImgList.join(',');
  this.$emit('input', upImgAll);
 }).catch((err) => {
  console.log(err);
 })
},

刪除圖片操作

我這刪除僅僅是對(duì)最后提交的圖片數(shù)組進(jìn)行處理，并未對(duì)上傳到圖片服務(wù)器上的圖片進(jìn)行移除處理

// 刪除圖片
delImg (index) {
 this.imgList.splice(index, 1);
 this.fileList.splice(index, 1);
 this.upNum = this.imgList.length;
 let imgAll = this.imgList.join(',');
 this.$emit('input', imgAll);
},

最后我在組件中監(jiān)聽了圖片改變

watch: {
 imgList () {
  this.$emit('changeNum'); //觸發(fā)父組件中驗(yàn)證資料是否完整的方法
 }
 },

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前名稱：如何在vue項(xiàng)目中使用圖片上傳組件
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article22/pdcjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)

廣告

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