20240522打卡
vue中element的上传图片功能
1.上传单张图片
<el-form-item label="上传照片" prop="avatar"> <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeUpload" > <img v-if="form.avatar" :src="form.avatar" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>
beforeUpload(file) { const isJPG = file.type === "image/jpeg" || file.type == "image/png"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!"); return; } if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); return; } const fileData = new FormData(); fileData.append("avatar", file); //upload为上传的接口 upload(fileData).then(res => { this.imgUrl = res.imgUrl; //对返回的图片地址进行回显 this.$set(this.form, "avatar", this.imgUrl); }); //阻止传到本地浏览器 return false; }
action表示必选参数,上传的地址,虽然是必传,但有些情况后端不支持这么做,要我们以某种形式传到服务器,那么我们只能在action中传入空字符串。然后在beforeUpload函数中传取数据给服务器,根据服务器返回的地址进行回显。
发现在上传过程中会传两遍,有一遍是传到本地的localhost的,我们需要在beforeUpload最后加上return false来阻止浏览器的默认行为。
2.上传多张图片
<el-form-item label="上传图片" prop="images"> <el-upload action="" :limit="3" list-type="picture-card" :on-exceed="handleExceed" :before-upload="beforeUpload" :on-remove="handleRemove" :file-list="fileList" > <i class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item>
list-type="picture-card"表示以下面这种方式展示图片;
beforeUpload函数同上传单张图片一样的逻辑;
filelist这个数组里存放的是上传的图片,它们会依次排放展示,不要自己再v-for循环遍历出来;
建议在弹框中完成上传多张图片的逻辑。
本文作者:丰川扬子
本文链接:https://www.cnblogs.com/newzeon/p/18207209
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库