創作靈感

最近在寫項目時，遇到了上傳頭像的需求，我使用的是element組件中的upload組件。但是在使用時，我需要實現預覽、手動上傳頭像等功能。然而在使用餓了么組件時，這些功能還是需要我們自己去手動實現的，在手動實現的時候，大家可能會遇到一些問題，下面我就向大家分享一下我是如何實現的。

關閉自動上傳

要想實現手動上傳，我們就需要關閉el-upload組件的自動上傳。首先，先向大家分享該組件的官方解釋文檔地址：Upload 上傳 | Element Plus

關閉自動上傳的方法為，將其中的auto-upload設置為false即可。需要注意的是，我們需要在auto-upload前加上一個:，既變為:auto-upload="false"。不加:會將后面的識別為字符串。

獲取上傳組件的值

關閉自動上傳以后，我們就需要手動拿到用戶選取的頭像，并在獲取的時候，做到以下兩件事：

1、將獲取的值保存下來，用戶提交時再發送給后端。

2、將獲取的值進行展示。

我們可以注意到，el-upload組件有著多個鉤子函數，我們應當根據自己的需求進行選取。這里我使用的是on-change鉤子函數，也就是當選取的圖片發生改變時，會促發該函數。

值得注意的是，因為我們關閉了自動上傳，所以有許多鉤子函數我們是不能使用的。例如on-success、on-error、on-progress等等函數都是不能再用了，因為我們不會自動上傳，也就不會觸發對應的鉤子函數。因此，這里我使用的是on-change鉤子函數，這個函數在添加文件時會被觸發，和自動上傳無關。

我們的大致思路是，用戶選取了新的頭像——》將新的頭像保存下來，并進行預覽展示。然而，當我們在on-change所綁定的函數內部改變新的頭像值時，卻發現并不能生效。上網查詢了相關博客，發現這是因為該鉤子函數只用于處理一些上傳圖片的邏輯，不能改變頁面內的值。這也就意味著，我們不能直接在該函數內部修改頁面內的值，解決辦法是——在該函數內部調用其他的函數進行值的修改。具體實現如下：

//用戶選擇了頭像function selectNewAvatar(e){//此鉤子函數不能直接修改頁面內的值，調用其他函數修改avatarChange(e.raw)}//更改頭像的值function avatarChange(e){avatar.value=evar reader = new FileReader();reader.readAsDataURL(e);reader.onload=function(event){avatar_url.value=event.target.result}}

可以看到，用戶選擇頭像時調用一個鉤子函數?，但其值的修改并不在這個函數內部進行，而是通過調用另外一個函數來修改頁面內對應的值。

同時，大家可以發現，實現圖片預覽的功能也在該函數中實現，具體為使用了一個FileReader對象來實現。其中e為對應的圖片對象。這里值得注意的是，我們不能直接使用el-upload所獲取的對象，而應該使用其中的raw屬性。這里應該是餓了么組件對該對象進行了一些包裝。

下面再給大家看一下html應該如何書寫，如下：

<el-uploadclass="new-avatar-upload":auto-upload="false":limit="1":on-change="selectNewAvatar":show-file-list="false"
><img v-if="avatar_url" :src="avatar_url" class="new-avatar-upload-img"/><el-icon v-else class="new-avatar-upload-icon"><Plus /></el-icon>
</el-upload>

在html內，圖片的預覽就靠img中的src屬性完成就可以了。

在上述代碼內，您可能會發現，你選取一次頭像以后，再次選取就無效了。這可能是你的最大上傳限制數量為1，這樣你的就不能再向內部添加新的文件了，也就不能觸發on-change鉤子函數了。你只需要將限制的數量設置大一些就好了，因為是手動上傳，最后你手動上傳最新的一張頭像即可。

總結

在使用餓了么的上傳組件實現圖片預覽時，最容易出錯的地方就算鉤子函數內部不能修改頁面內的值。要是你不懂這一個點，很可能一直都是無用功。

最后實現的效果大致如下：

其中，左邊的是之前的頭像，右邊就是你所選擇的新的頭像，并且可以展示出來了。