vue實現頭像上傳

一、html部分：

 

二、js部分（由於本項目用ts寫的，差異的地方請各位自己調整下）

<script lang="ts">　

import {XtVue, Component, Watch, XtRouter,Prop} from "../../../common/common";
import {AxiosResponse} from 'axios';

@Component
export default class UploadHeadComp extends XtVue{
    //頭像信息
    public headInfo:any = {
        src:require('../../../assets/images/icon/user_default.png')
    }
    //頭像文件
    public file:any = null

    //掛載
    mounted() {
        console.log('頭像上傳');
    }
    /**
     * 觸發input[type='file']點擊
     * */
    public uploadHeadImg(){
        this.$el.querySelector('.headInputFile').click();
    }
    /**
     * 頭像圖片改變
     * */
    public handleHeadChange(e){
        //兩個的區別是：ie下支持e.srcElement，ff支持e.target
        let $target:any = e.target || e.srcElement;
        let file:any = $target.files[0];
        this.file = file;
        //判斷上傳文件是否是圖片類型：\w 的釋義都是指包含大 小寫字母數字和下划線 相當於([0-9a-zA-Z])
        if(!/image\/\w+/.test(file.type)){
            this.$notify.error({title: '錯誤',message: '請上傳圖片文件'});
            return;
        }
        //獲取圖片大小，做圖片大小限制
        let imgSize:any = file.size;
        //圖片大小限制為5M,這里獲取的單位大小為b
        if(imgSize > 5*1024*1024){
            this.$notify.error({title: '錯誤',message: '圖片大小限制為5M'});
            return;
        }
        /**
         * 開始渲染選擇的圖片的兩種方式：1、本地路徑方法，2、base64方法
         * 兩種方法區別：
         * 1、通過FileReader.readAsDataURL(file)可以獲取一段data:base64的字符串；通過URL.createObjectURL(blob)可以獲取當前文件的一個內存URL。
         * 2、執行時機：createObjectURL是同步執行（立即的）；FileReader.readAsDataURL是異步執行（過一段時間）。
         * 3、內存使用：createObjectURL返回一段帶hash的url，並且一直存儲在內存中，直到document觸發了unload事件（例如：document close）或者執行revokeObjectURL來釋放；
         *   FileReader.readAsDataURL則返回包含很多字符的base64，並會比blob url消耗更多內存，但是在不用的時候會自動從內存中清除（通過垃圾回收機制）。
         * 4、優劣對比：使用createObjectURL可以節省性能並更快速，只不過需要在不使用的情況下手動釋放內存；
         *   如果不太在意設備性能問題，並想獲取圖片的base64，則推薦使用FileReader.readAsDataURL。
         * */
        // 本地路徑方法 1
        // this.headInfo.src = window.URL.createObjectURL(e.target.files[0]);
        // base64方法 2
        //FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據
        let reader:any = new FileReader();
        //onload 事件會在頁面或圖像加載完成后立即發生
        reader.onload = (data) => {
            let res = data.target || data.srcElement;
            this.headInfo.src = res.result
        },
        //FileReader對象的readAsDataURL方法可以將讀取到的文件編碼成Data URL
        reader.readAsDataURL(file);
        //將上傳的頭像圖片提交給后台
        this.handleUploadHead();
    }
    /**
     * 頭像上傳給后台
     * */
    public handleUploadHead(){
        let file:any = this.file;
        let picData:any = new FormData();
        picData.append('file',file,file.name);
        //接口請求，根據自身項目做調整，這里只是簡單介紹
        axios.post({
            url:"接口url",
            method:'post',
            data:picData,
        }).then(res=>{
                if(res.data.success == true){
　　　　　　　　　　　　//這里是借用elelment UI的消息提示
                    this.$notify.success({title: 'success',message: '頭像圖片上傳成功'});
                    return;
                }
                this.$notify.error({title: '錯誤',message: res.data.msg});
            }).catch(err=>{
                console.log(err);
            })
    }
}

</script>

說明：
1、handleHeadChange這個方法是做一些簡單校驗和判斷，介紹了兩種本地展示，在實際項目中，這步可以省略，直接將獲取的頭像文件數據傳給后台，在通過后台接口獲取頭像路徑
不足：
1、后期有時間會對這篇博客優化，優化內容是加上圖片裁剪功能，如果有需要要js的可以聯系我，js方法的裁剪、圖片放大和縮小是有的