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 中国大陆许可协议进行许可。

posted @   丰川扬子  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.