vue el-upload上傳文件的示例代碼
更新時間:2020年12月21日 09:56:32 作者:我自是年少
這篇文章主要介紹了vue el-upload上傳文件的示例代碼,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
話不多說 直接上代碼
<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">上傳到服務(wù)器</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上傳文件的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于vue el-upload上傳文件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時構(gòu)建的差別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法
大家應(yīng)該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實(shí)現(xiàn)路由添加的功能,事實(shí)上就也就實(shí)現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08vue 實(shí)現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實(shí)現(xiàn)模糊檢索,并根據(jù)其他字符的首字母順序排列,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11