如何在vue項目中使用圖片上傳組件

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

<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="上傳圖標">
   <input type="file" value="" id="choose" @change='onUpload' multiple>
  </div>
  </ul>
 </div>
 </div>
</template>

上面代碼中的kk-icon是自定義的圖標組件，只是多了個接受顏色和大小的功能，你們自己寫一個替換就行了。然后動態定義它的class，實現顯隱就結束了。

隨手貼個樣式

<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>

接下來看看實現邏輯

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

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

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

當選擇圖片確定后就會觸發change，因此我在@change="onUpload" 進行上傳，上傳使用了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)
 }
}

上傳操作中觸發圖片后續處理方法fileAdd

因為后臺要求拿到的圖片地址是一串字符串，所以我在下面中使用join() 進行數組轉化處理（因為后臺不支持接受圖片數組，因此我這個上傳多選圖片之后上傳也是單張上傳）

// 添加圖片
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) {  //驗證圖片格式
 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; //計算圖片數量
  this.fileList.push(file);    //添加進圖片數組
  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);
 })
},

刪除圖片操作

我這刪除僅僅是對最后提交的圖片數組進行處理，并未對上傳到圖片服務器上的圖片進行移除處理

// 刪除圖片
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);
},

最后我在組件中監聽了圖片改變

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。