element-ui官方文檔上沒有自定義上傳方法的完整例子，根據(jù)實際需求自己寫了一個
需求是這樣的：
1.用的是element-ui el-upload組件，可以上傳圖片或者視頻
2.圖片和視頻在上傳之前有不同的大小驗證
3.圖片大小不能大于2MB，尺寸要求7501125px
4.視頻大小不能大于2MB，尺寸要求7501125px，格式MP4
5.上傳圖片和視頻的后端接口URL不一樣
6.上傳后可預(yù)覽圖片和視頻

html

<el-form-item class="upload-bg register-bg" label="上傳廣告圖：" prop="ad_url">
    <div class="hide-video-box"></div>
    <el-upload
        class="avatar-uploader"
        ref="upload" 
        :action="upload_url" 
        list-type="picture-card" 
        :name="upload_name"
        :on-remove="handleRemove" 
        :on-exceed="handleExceed"
        :file-list="ad_url_list"
        :limit="1"
        :http-request="uploadSectionFile">
        <span class="font-14">選擇圖片或視頻</span>
        <div slot="tip" class="el-upload__tip">尺寸750*1125px，大小2M以內(nèi)，視頻支持MP4</div>
    </el-upload>
    <div class="bg-box">廣告背景圖預(yù)覽</div>
</el-form-item>

js

data: function(){
    return {
        upload_url: '',//上傳URL
        upload_name: '',//圖片或視頻名稱
        ad_url: '',//上傳后的圖片或視頻URL
        ad_url_list: [],//預(yù)覽列表
    }
},
methods: {
    handleExceed: function () {
        _.$alert('請先刪除選擇的圖片或視頻，再上傳', '提示', {
            type: 'warning'
        });
    },
    handleRemove: function (res, file) {
        var self = this;
        self.ad_url = '';
        var liItem = document.getElementsByClassName('hide-video-box')[0];
        liItem.innerHTML = '';
    },
    uploadSectionFile: function (params) {
        var self = this,
            file = params.file,
            fileType = file.type,
            isImage = fileType.indexOf('image') != -1,
            isVideo = fileType.indexOf('video') != -1,
            file_url = self.$refs.upload.uploadFiles[0].url;
        
        var isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            _.$alert('上傳圖片或視頻大小不能超過 2MB!', '提示', { type: 'error' });
            self.$refs.upload.uploadFiles = []; 
            return;
        }

        if(!isImage && !isVideo){
            _.$alert('請選擇圖片或視頻!', '提示', { type: 'error' });
            self.$refs.upload.uploadFiles = []; 
            return;
        }

        if (isImage) {
            var img = new Image();
            img.src = file_url;
            img.onload = function () {
                if (img.width !== 750 || img.height != 1125) {
                    _.$alert('圖片尺寸為750*1125px', '提示', { type: 'error' });
                    //將上傳列表清空
                    self.$refs.upload.uploadFiles = []; 
                    return;
                }
                //圖片上傳
                self.upload_url = '你的圖片上傳URL';
                self.upload_name = 'file_img[]';
                self.uploadFile(file, isVideo, '');
            }
        } else if (isVideo) {
            var isMP4 = file.type === 'video/mp4';
            if (!isMP4) {
                _.$alert('上傳視頻只支持 mp4 格式!', '提示', { type: 'error' });
                self.$refs.upload.uploadFiles = []; 
                return;
            }
            var videoDiv = document.createElement('video');
            var liItem = document.getElementsByClassName('hide-video-box')[0];
            videoDiv.src = file_url;
            liItem.appendChild(videoDiv);
            
            videoDiv.onloadeddata = function (event) {
                var target = event.target;
                var width = target.offsetWidth;
                var height = target.offsetHeight;

                if (width !== 750 || height != 1125) {
                    _.$alert('視頻尺寸為750*1125px', '提示', { type: 'error' });
                    //將上傳列表清空
                    self.$refs.upload.uploadFiles = []; 
                    return;
                }

                //視頻上傳
                self.upload_url = '你的視頻上傳URL';
                self.upload_name = 'file_video[]';
                self.uploadFile(file, isVideo, videoDiv);
            }
        }
    },
    uploadFile: function (file, isVideo, videoDiv) {
        var self = this,
            formData = new FormData();
        formData.append(self.upload_name, file);

        axios.post(self.upload_url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
            .then(function (res) {
                if (res.result === '0000') {
                    self.ad_url = res.data[0];
                    //創(chuàng)建一個顯示video的容器
                    if (isVideo) {
                        var liItem = document.getElementsByClassName('el-upload-list__item')[0];
                        videoDiv.style.width = '278px';
                        videoDiv.style.height = '415px';
                        liItem.prepend(videoDiv);
                    }
                    return;
                }
                _.$alert('上傳失敗，請重新上傳', '提示', { type: 'error' });
                self.$refs.upload.uploadFiles = []; 
            })
            .catch(function (err) {
                console.error(err);
            });
    }
}

css

.upload-bg {
    margin-bottom: 290px;
    &.register-bg{
        .el-upload-list--picture-card .el-upload-list__item{
            width: 280px;
            height: 417px;
        }
        .bg-box{
            width: 278px;
            height: 415px;
            line-height: 417px;
        }
    }
    .avatar-uploader {
        position: relative;
        z-index: 999;
    }
    .el-upload-list--picture-card{
        position: absolute;
        top: 0;
        left: 420px;
    }
    .bg-box{
        position: absolute;
        left: 420px;
        top: 0;
        z-index: 998;
        margin-bottom: 20px;
        border: 1px solid #c0ccda;
        border-radius: 5px;
        text-align: center;
        color: #bbb;
        font-size: 13px;
    }
    .el-upload--picture-card{
        height: 40px;
        line-height: 40px;
        span { color: #1AB394; }
    }
}
.hide-video-box {
    visibility: hidden;
    position: absolute;
    z-index: -999;
}

tips: 簡書上交流可能會看不到消息，如有問題，歡迎進群交流50063010