怎么在vue中使用elementUi上傳圖片

這篇文章給大家介紹怎么在vue中使用elementUi上傳圖片，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

上傳組件封裝需求分析

在基于elementUI庫做的商城后臺(tái)管理中，需求最大的是商品管理表單這塊，因?yàn)樾枰浫敫鞣N各樣的商品圖片信息。加上后臺(tái)要求要傳遞小于2M的圖片，因此封裝了一個(gè)upload.vue組件作為上傳頁面的子組件，它用于管理圖片上傳邏輯。

upload.vue解析

upload主要用于實(shí)現(xiàn)表單上傳圖片的需求，主要由input +img 構(gòu)成當(dāng)沒有圖片的時(shí)候顯示默認(rèn)圖片，有圖片則顯示上傳圖片，因?yàn)閕nput樣式不太符合需求所以只是將起設(shè)置為不可見，不能將其設(shè)置為display:none。否則將將無法觸發(fā)input的change事件

upload.vue代碼如下:

<template>
 <div>
 <div class="upload-box" :>
 <!-- 用戶改變圖片按鈕的點(diǎn)擊 觸發(fā)上傳圖片事件 -->
 <input type="file" :ref="imgType$1" @change="upload(formVal$1,imgType$1)" class="upload-input" />
 <!-- img 的 src 用于渲染一個(gè) 圖片路徑 傳入圖片路徑 渲染出圖片 -->
 <img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
 </div>
 </div>
</template>
<script>
/* 
 該組件因?yàn)橐蟼鞫鄠€(gè)屬性的圖片 主圖（mainImg） 詳細(xì)圖(detailImg) 規(guī)格圖 (plusImg) 
 該組件基于壓縮插件lrz,所以下方打入該組件
 npm install lrz --save 即可
*/
import lrz from 'lrz';
export default {
 name: 'uploadImg', //組件名字
 props: {
  formVal: {
   type: Object, //props接受對(duì)象類型數(shù)據(jù)（表單對(duì)象也可以是純對(duì)象類型）
   required: true,
   default: {}
  },
  imgType: {    //表單對(duì)象中的圖片屬性 example:mainImg
   type: String,
   required: true,
   default: ''
  },
  imgStyle: {
   type: Object,  // 用于顯示的圖片的樣式 
   required: true //必須傳遞
  }
 },
 created: function() {
  //生命周期函數(shù) 
 },
 data: function() {
  /*
   因?yàn)樵摻M件需要改變父組件傳遞過來的值,
   所以將起拷貝一份
  */
  let formVal$1 = this.formVal;
  let imgType$1 = this.imgType;
  return {
   formVal$1,
   imgType$1,
   uploadUrl: url,//你的服務(wù)器url地址
  };
 },
 methods: {
  upload: function(formVal, imgType) {
   var self = this;
   //圖片上傳加載我們?cè)谶@里加入提示，下方需要主動(dòng)關(guān)閉，防止頁面卡死
   var loadingInstance = this.$loading({
    text: '上傳中'
   });
   var that = this.$refs[imgType].files[0]; //文件壓縮file
   //圖片上傳路徑
   var testUrl = this.uploadUrl; //圖片上傳路徑
   try {
    //lrz用法和上一個(gè)一樣也是一個(gè)壓縮插件來的
    lrz(that)
     .then(function(message) {
      var formData = message.formData; //壓縮之后我們拿到相應(yīng)的formData上傳
      self.$axios
       .post(testUrl, formData)
       .then(function(res) {
        console.log(res);
        if (res && res.data.iRet == 0) {
         formVal[imgType] = res.data.objData.sUrl;
         //上傳成功之后清掉數(shù)據(jù)防止下次傳相同圖片的時(shí)候不觸發(fā)change事件 
         self.$refs[imgType].value = '';
         /*
          這里因?yàn)槭褂胑lementUI中的表單驗(yàn)證，
          當(dāng)上傳圖片完成之后還會(huì)提示沒有上傳圖片
          所以需要通知父組件清除該驗(yàn)證標(biāo)記 
          */
         self.$emit('clearValidate', imgType);
         self.$nextTick(() => {
          // 以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉
          loadingInstance.close();
         });
        } else {
         throw res.data.sMsg;
        }
       })
       .catch(function(err) {
        self.$nextTick(() => {
         // 以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉
         loadingInstance.close();
        });
        //接口報(bào)錯(cuò)彈出提示
        alert(err);
       });
     })
     .catch(function(err) {
      self.$nextTick(() => {
       loadingInstance.close();
      });
     });
   } catch (e) {
    //關(guān)閉加載動(dòng)畫實(shí)例
    self.$nextTick(() => {
     loadingInstance.close();
    });
   }
  }
 },
 mounted: function() {},
 watch: {
  /*
  這里需要注意當(dāng)父組件上傳一個(gè)圖片然后通過重置按鈕重置的時(shí)候.
   我們需要監(jiān)聽一下,防止上傳同一張圖片上傳失敗
  */
  formVal: {
   handle: function(newVal, oldVal) {
    var imgType = this.imgType;
    if (newVal[imgType] == '') {
     //這里使用了原生js寫法當(dāng)然也可以通過ref引用找到，后者更好
     document.getElementsByClassName('upload-input')[0].value = '';
    }
   }
  }
 }
};
</script>
<style scoped>
/*
 這里是默認(rèn)的設(shè)置圖片的尺寸?？梢酝ㄟ^父組件傳值將其覆蓋
*/
.upload-box {
 position: relative;
 height: 100px;
 width: 100px;
 overflow: hidden;
}

.upload-box img {
 width: 100%;
 height: 100%;
}

.upload-box .upload-input {
 position: absolute;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
}
</style>

商品頁中使用upload組件

在good.vue中我們引入upload組件。并且傳遞相應(yīng)表單對(duì)象，需上傳的圖片類型的屬性，以及圖片顯示樣式給子組件

good.vue核心代碼:

<template>
 <el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
 <!-- 無關(guān)代碼略 -->
 <el-form-item label="詳情圖" prop="sDetailImg" ref="sDetailImg">
  <uploadImg :form-val="form" :img-type="'sDetailImg'" :img- @clearValidate="clearValidate"></uploadImg>
 </el-form-item>
 <el-form-item>
  <el-row >
  <el-button type="primary" size="medium" @click.stop="submit('form')" v-if="!form.ID">保存</el-button>
  <el-button type="primary" size="medium" @click.stop="submit('form')" v-else-if="form.ID">修改</el-button>
  <el-button size="medium" @click.stop="resetForm('form')">重置</el-button>
  </el-row>
 </el-form-item>
 </el-form>
 <!-- 略 -->
</template>
<script>
 import uploadImg from "../common/uploadImg"; //圖片上傳
 export default {
 name: "good", //組件名字用戶緩存 
 data: function() {
  return {
  form: {
  ID: NULL,
  //其他字段略
  sDetailImg: "" //商品詳細(xì)圖
  },
  detailImgStl: {
  width: "350px",
  height: "150px"
  },
  rules: {
  sDetailImg: [{
  required: true,
  message: "請(qǐng)?zhí)顚懺敿?xì)圖信息",
  trigger: "change"
  }],
  }
  }
 },
 methods: {
  //這里監(jiān)聽子組件回寫的信息，用戶清除上傳成功之后還顯示圖片未上傳的bug
  clearValidate: function(imgName) {
  //清空?qǐng)D片上傳成功提示圖片沒有上傳的驗(yàn)證字段
  this.$refs[imgName].clearValidate();
  },
  //重置表單
  resetForm: function(formName) {
  this.confirm("確認(rèn)重置表單", function(self) {
  self.$refs[formName].resetFields();
  })

  }
 },
 }
</script>

關(guān)于怎么在vue中使用elementUi上傳圖片就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。