赞
踩
data: function(){return{
upload_url:'',//上传URL
upload_name: '',//图片或视频名称
ad_url: '',//上传后的图片或视频URL
ad_url_list: [],//预览列表
}
},
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 = newImage();
img.src=file_url;
img.οnlοad= 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.οnlοadeddata= 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= newFormData();
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];//创建一个显示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);
});
}
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。