element-ui官方文檔上沒(méi)有自定義上傳方法的完整例子扭勉，根據(jù)實(shí)際需求自己寫(xiě)了一個(gè)
需求是這樣的：
1.用的是element-ui el-upload組件萧吠，可以上傳圖片或者視頻
2.圖片和視頻在上傳之前有不同的大小驗(yàn)證
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('請(qǐng)先刪除選擇的圖片或視頻，再上傳', '提示', {
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('上傳圖片或視頻大小不能超過(guò) 2MB!', '提示', { type: 'error' });
self.$refs.upload.uploadFiles = [];
return;
}
if(!isImage && !isVideo){
_.$alert('請(qǐng)選擇圖片或視頻!', '提示', { 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)建一個(gè)顯示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('上傳失敗秆撮，請(qǐng)重新上傳', '提示', { 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;
}
