話不多說 直接上代碼

<el-upload :action='actionUrl' :multiple='false' name='files' ref='upload' :file-list='fileList' :on-preview='handlePreview' :on-success='handleSuccess' :before-upload ='beforeUpload' :http-request='httpRequest' :on-exceed='handleExceed' :on-change='handleChanged' accept='.csv,.xls,.xlsx' :auto-upload='false' ><el-button slot='trigger' size='small'>選取文件</el-button><el-button size='small' type='primary' @click='submitUpload'>上傳到服務器</el-button><div slot='tip' class='el-upload__tip'>只能上傳csv/xslx/xsl文件，且不超過1M</div></el-upload>

actionUrl: `${env.imgCaptchaUrl}**/upload`,fileList: [],handleChanged(file,fileList){ this.fileList = fileList }, handleExceed (file, fileList) { console.log(file); }, handleSuccess (res, file) { console.log(file); console.log(res); }, handlePreview(file){ console.log(file); }, beforeUpload (file) { if (file.size / 1024 / 1024 > 1) { Vue.$vux.toast.text(’上傳文件不超過1M’) return false } var ext = file.name.substring(file.name.lastIndexOf(’.’) + 1) const extension = ext === ’csv’ || ext === ’CSV’ || ext === ’xlsx’ || ext === ’xls’ if (!extension) { Vue.$vux.toast.text(’上傳文件格式只能為csv、xlsx/xls’) return false } }, httpRequest (opt) { const _this = this const file = opt.file Vue.$vux.toast.text(’文件上傳中...’) var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { let imgType = ’’ var ext = file.name.substring(file.name.lastIndexOf(’.’) + 1) if (ext === ’csv’ ) { imgType = ’csv’ } if (ext === ’xlsx’ || ext === ’xls’) { imgType = ’xlsx’ } uploadCsv({ files: this.result.replace(`data:image/${imgType};base64,`, ’’) }) .then(res => { if (res.errno === 0) { Vue.$vux.toast.text(’上傳成功’) _this.account.license_url = res.data.url } }) .catch(err => {}) } }, submitUpload(){ if(this.fileList.length==0){ this.successDialog = '請先選擇文件'; this.sussAlog = true; return } this.$refs.upload.submit(); },onDownload(){ let start = '' let end = '' if(this.form.time){ start = parseTime(this.form.time[0]); end = parseTime(this.form.time[1]); } delete(this.form.time) Object.assign(this.form, { first_time: start, end_time: end , }); let { first_time, end_time, } = this.form; window.open(this.downUrl+'lm/downloadModel?'+ '&first_time='+first_time+ '&end_time='+end_time , ’_blank’); },

以上就是vue el-upload上傳文件的示例代碼的詳細內容，更多關于vue el-upload上傳文件的資料請關注好吧啦網其它相關文章！