element-ui 之upload 文件上传
element-ui 之upload 文件上传
多个文件上传
使用: :file-list="imgUrl" 和 :http-request="uploadPicture"

<template> <div class="fei-upload"> <el-upload class="picture-uploader" :class="{hideUpload:imgUrl.length>fileLimit}" :limit=fileLimit+1 action="" ref="uploader" :file-list="imgUrl" :http-request="uploadPicture" :before-upload="beforeUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt="."> </el-dialog> </div> </template> <script> /* 这是ElementUI */ import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); /* 这是ElementUI */ export default { components:{}, data() { return { dialogImageUrl: '', dialogVisible: false, imgUrl: [], // 上传所有文件列表 } }, props: { typeString: { // 上传图片类型 type: String, default: "fei_type" }, fileLimit: { // 上传图片张数 type: Number, default: 1, }, }, methods: { handleRemove(delFile, newFileList) { this.imgUrl = [...newFileList]; this.updateParentImg(); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, uploadPicture(req) { const reader = new FileReader(); reader.readAsDataURL(req.file); reader.onload = () => { let _index = req.file.name.lastIndexOf("."); let suffix = req.file.name.substr(_index); // 上传图片 const params = { suffix: suffix, type: this.typeString, base64: reader.result.split(',')[1] } api.$post(params).then(res => { if (res.data.code=== 200) { let _url = res.data.data.url this.imgUrl.push({id: res.data.data.fileId, name: req.file.name, url: _url}); this.updateParentImg(); } else { this.$message.error('上传失败') } }).finally(() => { this.loading = false }) } }, updateParentImg() { this.$emit('parentImgList', this.imgUrl); }, beforeUpload(file) { console.log(file); }, }, }; </script> <style lang="sass" scoped> .fei-upload { .hideUpload::v-deep { .el-upload--picture-card { visibility: hidden; } } } </style>
简单上传一个文件,

<template> <div class="file-item"> <strong> 文件上传4 </strong> <el-upload action :http-request="changesFile4"> <el-button type="primary"> element 上传文件 </el-button> </el-upload> </div> </template> <script setup> const changesFile4 = (req) => { let fd = new FormData() fd.append('file', req.file) fd.append('FileName', req.file.name) app.$post("file/upload", fd).then(res => { console.log("上传成功了",res); }) } </script>
分类:
Element UI
标签:
Element UI
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
2020-05-25 Preserve log 保留跳转前网络请求
2020-05-25 merge into current 合并到当前分支
2020-05-25 Git 设置提交用户名字和邮箱
2020-05-25 WebStorm 格式化文件后,原来的空格丢失