话不多说 直接上代码
<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上传文件的资料请关注其它相关文章!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月13日
2024年11月13日
- 【爵士萨克斯】RichardElliot-2016-SummerMadness【24bit-FLAC】
- 谭艳《最走心好声音HQ》马兰士德国黑胶[低速原抓WAV+CUE][1G]
- 群星《第6届 2010十大发烧唱片精选》 2CD [WAV+CUE][1.5G]
- 李梦瑶&张玮伽&谭艳&孙露 -《发烧四大天后2CD》DTS丽声 2CD [WAV分轨][2G]
- 原神海浪中的莎孚旁的幻写灵解锁方法
- 【阴阳师手游】原神5.2联动介绍
- 原神恰斯卡最强深渊阵容搭配推荐
- 盛惠决战双十一降临《坦克世界》
- 最终幻想1411月12日更新公告:7.05版本正式上线
- 守望先锋2经典6v6模式限时回归
- 康康《自由如风6N纯银SQCD》[WAV+CUE]
- 傅薇1991-迷雾中共舞[歌林][WAV+CUE]
- 王菲《菲故事6N纯银SQCD》WAV+CUE
- 群星.1996-宝丽金笑傲江湖精丫宝丽金】【WAV+CUE】
- 好日.2024-好日HoNi【风潮】【FLAC分轨】