如何在vue項(xiàng)目中使用圖片上傳組件-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括網(wǎng)站制作、做網(wǎng)站、app開發(fā)定制、小程序設(shè)計(jì)、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期，同時(shí)每年都有很多新員工加入，為我們帶來大量新的創(chuà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)楹笈_要求拿到的圖片地址是一串字符串，所以我在下面中使用join() 進(jìn)行數(shù)組轉(zhuǎn)化處理（因?yàn)楹笈_不支持接受圖片數(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;    //傳給后臺的圖片地址
  this.imgList.push(imgUrl);
  this.upImgList.push(upImg);
  let upImgAll = this.upImgList.join(',');
  this.$emit('input', upImgAll);
 }).catch((err) => {
  console.log(err);
 })
},

刪除圖片操作

我這刪除僅僅是對最后提交的圖片數(shù)組進(jìn)行處理，并未對上傳到圖片服務(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)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：如何在vue項(xiàng)目中使用圖片上傳組件-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://bm7419.com/article14/igdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、企業(yè)網(wǎng)站制作、定制開發(fā)、Google、用戶體驗(yàn)、網(wǎng)站策劃

廣告

聲明：本網(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)