vue el-upload上傳檔案的示例程式碼
阿新 • • 發佈:2020-12-23
話不多說 直接上程式碼
<el-upload :action="actionUrl" class="avatar-uploader" :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 style="margin-left: 10px;" 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上傳檔案的資料請關注我們其它相關文章!