element-ui el-upload http-request自定義上傳方法

html

<el-form-item class="upload-bg register-bg" 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之內，視頻支持MP4</div>
    </el-upload>
</el-form-item>

js

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 = 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]; //建立一個顯示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); }); } }