快捷導(dǎo)航

vue element upload實(shí)現(xiàn)圖片本地預(yù)覽

更新時(shí)間：2019年08月20日 11:02:50 作者：LONGLONGAGO_RU

這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue使用element實(shí)現(xiàn)本地預(yù)覽，最主要的是將圖片路徑轉(zhuǎn)換為base64，供大家參考，具體內(nèi)容如下

HTML

<el-upload
 class="avatar-uploader"
 action="123" //這個(gè)路徑不重要，可以隨便寫
 :show-file-list="false"
 :on-success="handleAvatarSuccess"
 :on-change="onchange"
 :before-upload="beforeAvatarUpload">
 <img v-if="imageUrl" :src="imageUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

js部分

<script>
 export default {
  data() {
   return {
    imageUrl: '',
   };
  },
  methods: {
   handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
   },
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
     this.$message.error('上傳頭像圖片只能是 JPG 格式!');
    }
    if (!isLt2M) {
     this.$message.error('上傳頭像圖片大小不能超過 2MB!');
    }
    return isJPG && isLt2M;
   },
   //當(dāng)上傳圖片后，調(diào)用onchange方法，獲取圖片本地路徑
   onchange(file,fileList){
     var _this = this;
        var event = event || window.event;
        var file = event.target.files[0];
        var reader = new FileReader(); 
        //轉(zhuǎn)base64
        reader.onload = function(e) {
         _this.imageUrl = e.target.result //將圖片路徑賦值給src
        }
        reader.readAsDataURL(file);
   }
  }
 }
</script>

現(xiàn)在就可實(shí)現(xiàn)圖片本地預(yù)覽了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE項(xiàng)目中引入JS文件的方法總結(jié)
在vue中如果把所有的代碼都寫到一個(gè)頁面中,有時(shí)比較難找,顯得比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目中引入JS文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue?ui的安裝步驟以及使用詳解
最近公司開發(fā)一個(gè)項(xiàng)目,采用的前后端分離的方式,前端采用vue,但是再項(xiàng)目開發(fā)過程中遇到一個(gè)比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下
2022-08-08
詳細(xì)分析vue表單數(shù)據(jù)的綁定
這篇文章主要介紹了vue表單數(shù)據(jù)的綁定的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue.js入門教程之基礎(chǔ)語法小結(jié)
這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語法，對(duì)于大家學(xué)習(xí)vue.js具有一定的參考借鑒價(jià)值，有需要的朋友們下面來一起看看。
2016-09-09
vue.js自定義組件directives的實(shí)例代碼
這篇文章主要介紹了vue.js自定義組件directives的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架，開發(fā)只需要關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下
2019-12-12
Vue項(xiàng)目中使用Bootstrap
這篇文章介紹了Vue項(xiàng)目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
vue遍歷中存在el-form之踩坑記錄
這篇文章主要介紹了vue遍歷中存在el-form之踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解vue computed的緩存實(shí)現(xiàn)原理
這篇文章主要介紹了vue computed的緩存實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-04-04
Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10