当前位置:   article > 正文

elementui 上传请求头_element-ui el-upload http-request自定义上传方法

elementui 上传请求头_element-ui el-upload http-request自定义上传方法

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);

});

}

}

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/805628
推荐阅读