当前位置：首页 > news >正文

vue+element上传图片

news 2026/5/21 16:45:46

一、html页面上传图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><input type="file" id="fileInput" /><img id="imagePreview" src="" alt="Image Preview" /></div>
</body>
</html>
<script>const fileInput = document.getElementById('fileInput');const imagePreview = document.getElementById('imagePreview');fileInput.addEventListener('change', (event) => {// 获取用户选择的第一个文件const file = event.target.files[0]; if (file) {const objectURL = URL.createObjectURL(file); // 创建临时 URLimagePreview.src = objectURL; // 设置为 img 标签的 src}});
</script>

二、vue选择图片和上传图片

1.:auto-upload="false"取消自动上传，点击上传头像按钮上传

2.:on-change文件上传成功时的钩子，(选择图片后，把图片格式转换为base64格式）

3.点击button按钮和upload组件都可以选择图片

4.上传图片（发送请求更新头像，userStore重新更新数据，给用户提示）

<template><PageContainer title="更换头像"><el-uploadref="uploadRef"class="avatar-uploader":auto-upload="false":show-file-list="false":before-upload="beforeAvatarUpload":on-change="onSelectFile"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload><div class="btns"><el-button icon="Plus" type="primary" @click="onSelectFn">选择图片</el-button><el-button icon="Upload" type="success" @click="onUpdateFn">上传头像</el-button></div></PageContainer>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Upload } from "@element-plus/icons-vue";
import PageContainer from "@/components/PageContainer.vue";
import { updateAvatarApi } from "@/api/user";
import { useUserStore } from "@/store";
//基于store的数据拿到imageUrl的初始值
const userStore = useUserStore();
//图片上传
const imageUrl = ref(userStore.userInfo.user_pic);
const uploadRef = ref();
const beforeAvatarUpload = (rawFile) => {if (rawFile.type !== "image/jpeg") {ElMessage.error("Avatar picture must be JPG format!");return false;} else if (rawFile.size / 1024 / 1024 > 2) {ElMessage.error("Avatar picture size can not exceed 2MB!");return false;}return true;
};
const onSelectFile = (uploadFile) => {//基于fileReader读取图片做预览const reader = new FileReader();// 将文件读入为Data URLreader.readAsDataURL(uploadFile.raw);// 获取Base64字符串reader.onload = () => {imageUrl.value = reader.result;};
};
const onSelectFn = () => {uploadRef.value.$el.querySelector("input").click();
};
const onUpdateFn = async () => {//发送请求更新头像await updateAvatarApi(imageUrl.value);//userStore重新渲染await userStore.getuserInfo();//提示用户ElMessage.success("修改成功");
};
</script>
<style lang="scss">
.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}
.avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;
}
.btns {margin-top: 20px;
}
</style>

三、表单中上传图片

1.在表单中使用upload组件

2.URL.createObjectURL 是一个在 JavaScript 中用于创建一个指向 Blob 或 File 对象的临时 URL 的方法。这种方法非常有用，尤其是在处理文件上传或生成动态内容时，比如图像预览。imageUrl.value = URL.createObjectURL(uploadFile.raw);

生成临时 URL: 它为 Blob 或 File 对象生成一个可以在浏览器中使用的 URL。这个 URL 是临时的，仅在页面生命周期内有效。
文件预览: 在用户选择文件后，可以使用这个 URL 显示图像预览。比如，当用户上传一张图片时，可以生成这个 URL 并将其设置为 <img> 标签的 src 属性。

3.使用 Axios 来获取网络图片并将其转换为 File 对象。以下是具体的实现步骤：

使用 Axios 请求获取图片的 Blob 数据。
将 Blob 数据转换为 File 对象。

<template><el-drawer v-model="drawerVisible" direction="rtl"><template #header><h4>{{ formModel.id ? "编辑文章" : "添加文章" }}</h4></template><template #default><el-form :model="formModel" :rules="rules" ref="formRef"><el-form-item label="文章标题" prop="title"><el-input v-model="formModel.title"></el-input></el-form-item><el-form-item label="文章分类" props="cate_id"><ChannelSelectv-model:modelValue="formModel.cate_id"width="100%"></ChannelSelect></el-form-item><el-form-item label="文章封面" prop="cover_img"><el-uploadclass="avatar-uploader":auto-upload="false":show-file-list="false":before-upload="beforeAvatarUpload":on-change="onSelectFile"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item><el-form-item label="文章内容" prop="content"><div class="editor"><QuillEditorref="editorRef"v-model:content="formModel.content"theme="snow"contentType="html"/></div></el-form-item><el-form-item label=" "><div><el-button type="primary" @click="onPublisg('已发布')">发布</el-button><el-button @click="onPublisg('草稿')">草稿</el-button></div></el-form-item></el-form></template></el-drawer>
</template>
<script setup>
import { ref, nextTick } from "vue";
import ChannelSelect from "@/view/article/component/ChannelSelect.vue";
import {addArticlePublishApi,getArticleInfoApi,editArticleInfoApi,
} from "@/api/article.js";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ElMessage } from "element-plus";
import { baseURL } from "@/utils/request";
const drawerVisible = ref(false);
const emit = defineEmits(["success"]);
const deaultFormModel = {title: "",cate_id: "",cover_img: "",content: "",state: "",
};
const formModel = ref({ ...deaultFormModel });
const formRef = ref();
const editorRef = ref();
const open = async (row) => {drawerVisible.value = true;if (row.id) {const res = await getArticleInfoApi(row.id);formModel.value = res.data.data;console.log(res);imageUrl.value = `${baseURL}${res.data.data.cover_img}`;//提交给后台需要的格式是file格式对象，需要将网络图片地址转为file对象,将 File 对象赋值给表单模型const file = await convertImageUrlToFile(imageUrl,formModel.value.cover_img);formModel.value.cover_img = file;} else {formModel.value = { ...deaultFormModel };console.log("editorRef.value", editorRef.value);imageUrl.value = "";await nextTick(() => {editorRef.value.setHTML("");});}
};
defineExpose({ open });
//图片上传
const imageUrl = ref("");
const beforeAvatarUpload = (rawFile) => {if (rawFile.type !== "image/jpeg") {ElMessage.error("Avatar picture must be JPG format!");return false;} else if (rawFile.size / 1024 / 1024 > 2) {ElMessage.error("Avatar picture size can not exceed 2MB!");return false;}return true;
};
const onSelectFile = (uploadFile) => {imageUrl.value = URL.createObjectURL(uploadFile.raw);formModel.value.cover_img = uploadFile.raw;
};
const onPublisg = async (state) => {formModel.value.state = state;const fd = new FormData();for (let key in formModel.value) {fd.append(key, formModel.value[key]);}if (formModel.value.id) {await editArticleInfoApi(fd);ElMessage.success("修改成功");drawerVisible.value = false;emit("success", "emit");} else {await addArticlePublishApi(fd);ElMessage.success("添加成功");drawerVisible.value = false;console.log("drawerVisible.value", drawerVisible.value);emit("success", "add");}
};
const convertImageUrlToFile = async (imageUrl, fileName = "image.jpg") => {// 使用 Axios 获取图片const response = await axios.get(imageUrl, {responseType: "blob", // 设置响应类型为 blob});// 创建 File 对象const file = new File([response.data], fileName, {type: response.data.type,});return file;
};
</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}
.avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;
}
.editor {width: 100%;.ql-editor {min-height: 200px !important;}
}
</style>

vue+element上传图片

一、html页面上传图片 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> <…...

编程日记 2024/11/1 11:12:01

用ChatGPT提升工作效率：从理论到实际应用

伴人工智能技术的迅速演进，像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力，还能自动化许多日常任务，从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率，涵…...

编程日记 2024/11/1 11:09:59

8、Node.js Express框架

五、Express框架 5.1概念 Express框架是一个基于Node.js平台的极简、灵活的WEB开发框架：www.express.com.cn 简单来说，Express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用 5.2安装 npm i express5.3 Express初体验 //01-express初体验.js //1.导入exrp…...

编程日记 2024/11/1 11:04:52

STM32F103C8T6学习笔记3--按键控制LED灯

1、实验内容 S4、S5分别接PB12和PB13，实验要求，按下S4，D1亮，D2灭；按下S5，D2亮，D1灭。由于按键学习的是GPIO口的输入功能，和输出功能的配置略有区别。本次通过按键触发相应功能没有…...

编程日记 2024/11/1 11:02:44

Unity3D Shader实现法线贴图功能详解

在Unity3D中，Shader是一种强大的工具，可以帮助开发人员实现各种复杂的视觉效果，其中法线贴图功能就是其中之一。法线贴图是一种纹理映射技术，通过在模型表面上放置法线贴图纹理来模拟真实世界中的细节和凹凸，使模型看起…...

编程日记 2024/11/1 11:00:42

【含开题报告+文档+源码】基于SpringBoot+Vue的校园设备报修系统

开题报告随着高校规模的不断扩大和设施设备的日益完善，传统的校园设备报修方式已经无法满足日益增长的维修需求。这种方式往往存在信息不准确、报修流程冗长、反馈不及时等问题，给高校维修工作带来了很大的困扰。为了提高设备故障处理的效率和准确性&a…...

编程日记 2024/11/1 10:59:41

电赛入门之软件stm32keil+cubemx

hal库可以帮我们一键生成许多基本配置，就不需要自己写了，用多了hal库就会发现原来用基本库的时候都过的什么苦日子（笑下面我们以f103c8t6，也就是经典的最小核心板来演示一、配置工程首先来新建一个工程这里我们配置rcc和sys&…...

编程日记 2024/11/1 10:56:35

STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器

1、简要说明与电路图 LED灯与蜂鸣器都是GPIO的输出操作，给高低电平实现。GPIO操作也是后续操作的基础，没有什么难度，记不住寄存器没关系，只要把流程理清楚就可以了。端口配置成推挽输出模式，高低电平均有驱动能力。 …...

编程日记 2024/11/1 10:53:32

Docker命令备忘录----Linux运维

1. Docker简介 Docker 是一个开源平台，旨在帮助开发人员和运维人员通过容器技术加速应用的开发、测试和部署。它提供了轻量级的隔离环境，使应用程序及其依赖能够快速打包并运行在任何环境中。 Docker的核心组件包括镜像（Image）、…...

编程日记 2024/11/1 10:51:30

Golang new() make var []int 使用的具体区别

一、数组和切片的初始化 1 var []int 格式 func main() {var t1 []intt1 append(t1, 1)fmt.Println(t1) //正常输出 1var t11 []intt11[0] 11 //panic: runtime error: index out of range [0] with length 0fmt.Println(t11)var t12 [1]intt12[0] 12fmt.Println(t12) /…...

编程日记 2024/11/1 10:50:28

【Linux驱动开发】多线程调用驱动时的并发与竞争（原子操作、自旋锁、信号量、互斥锁）

【Linux驱动开发】多线程调用驱动时的并发与竞争（原子操作、自旋锁、信号量、互斥锁） 文章目录多线程调用驱动原子操作原子变量操作原子位操作调用方法自旋锁读写锁顺序锁调用方法信号量互斥锁（互斥体）中断中使用附录&#xf…...

编程日记 2024/11/1 10:49:27

qt QComboBox详解

QComboBox是一个下拉选择框控件，用于从多个选项中选择一个。通过掌握QComboBox 的用法，你将能够在 Qt 项目中轻松添加和管理组合框组件，实现复杂的数据选择和交互功能。重要方法 addItem(const QString &text)：将一个项目添…...

编程日记 2024/11/1 10:46:24

redis做缓存,mysql的数据怎么与redis进行同步(双写一致性)

基于业务做选择,强一致性和允许延迟再加消息队列强一致性:当修改了数据库的数据同时更新缓存的数据,缓存和数据库的数据保持一致读操作:缓存命中,直接返回数据,缓存没有命中,查询数据库,写入缓存,设定过期时间写操作:延迟双删 :先删除缓存,修改数据库,等待延迟(数据库主从节…...

编程日记 2024/11/1 10:44:22

WPF触发器

WPF触发器触发器（Trigger）通常指的是一种事件驱动机制，用于响应特定的事件或条件。WPF触发器是WPF中一种强大的功能，允许开发者在样式和模板中定义条件逻辑，以响应属性值的变化。WPF提供了多种触发器来实现样式和模板…...

编程日记 2024/11/1 10:42:17

反序列化漏洞的运行原理及防御方法

反序列化漏洞是当前网络安全领域中的一种严重安全威胁，其运行原理和防御方法对于保障应用程序和系统安全至关重要。本文将深入探讨反序列化漏洞的运行原理，并提出有效的防御策略。 ### 反序列化漏洞的运行原理序列化是指将对象的状态信息转换为可以存储…...

编程日记 2024/11/1 10:41:16

护眼大路灯哪个牌子好？口碑最好的护眼灯品牌

护眼大路灯哪个牌子好？作为一名专业的测评师，我发现有大量的家长都反应自己家孩子在学习时经常出现，揉眼睛、频繁眨眼、眼睛痒等问题，而这些问题多半是与不良光线有光，这些现象使我更加关注护眼大路灯的选择&#xff0…...

编程日记 2024/11/1 10:40:14

Redis 初学者指南

Redis 初学者指南 1. 什么是 Redis？2. Redis 的基本概念3. 安装 Redis3.1 使用 Docker 安装3.2 从源码编译安装 4. 基本操作4.1 启动 Redis 服务4.2 连接 Redis 客户端4.3 常用命令 5. Redis 的数据结构5.1 字符串5.2 列表5.3 集合5.4 散列5.5 有序集合 6. 高级特性…...

编程日记 2024/11/1 10:38:12

node.js_npm : 无法加载文件 D:\Program Files\nodejs\npm.ps1

这个错误信息表明 PowerShell 因为执行策略的限制而阻止了 npm.ps1 脚本的运行。PowerShell 的执行策略是一种安全功能，用于限制哪些脚本可以运行，以防止恶意脚本的执行。要解决这个问题，你可以按照以下步骤操作： 查看当前的执行…...

编程日记 2024/11/1 10:36:08

技术星河中的璀璨灯塔 —— 青云交的非凡成长之路

💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的…...

编程日记 2024/11/1 10:27:58

使用 Git 命令将本地项目上传到 GitLab

步骤详解 1. 在 GitLab 上创建一个新项目登录你的 GitLab 账号。点击“New project”创建一个新的空项目。为项目设置名称、描述等信息。 2. 关联远程 Git 仓库 1.初始化本地 Git 仓库 git init 2.关联远程仓库： git remote add origin https://gitlab-lizz…...

编程日记 2024/11/1 10:25:56

5分钟搞定：用WinDiskWriter在Mac上制作Windows启动盘，轻松绕过TPM限制

5分钟搞定：用WinDiskWriter在Mac上制作Windows启动盘，轻松绕过TPM限制【免费下载链接】windiskwriter 🖥 Windows Bootable USB creator for macOS. 🛠 Patches Windows 11 to bypass TPM and Secure Boot requirements. &#x…...

编程新知 2026/5/21 15:05:02

盒子不同定位的解说！

目录一、相对定位二、绝对定位三、固定定位一、相对定位【概念】：简单来说，就是让一个元素相对于它自己原本应该在的位置进行移动。【核心特点】：1.不脱离文档流：这是相对定位最关键的特点。元素虽然移动了&#xff0c…...

编程新知 2026/5/21 15:05:02

为什么你的“丝绸”总像锡纸？Midjourney材质语义断层诊断：87%用户忽略的材质动词前置语法（drape, crumple, refract）

更多请点击： https://intelliparadigm.com 第一章：材质语义断层的本质：从物理光学到提示词编码的跨模态失配材质在真实世界中由微观结构、折射率、表面粗糙度、各向异性散射等物理属性共同定义，其视觉表现依赖于光与物质的连续相…...

编程新知 2026/5/21 13:42:32

如何快速搭建Sunshine游戏串流：面向新手的完整指南

如何快速搭建Sunshine游戏串流：面向新手的完整指南【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否曾想过在客厅的电视上流畅玩PC游戏，或者在平板上享…...

编程新知 2026/5/21 13:27:22

【APP分发系统二开版】app打包一键免IOS免签封包分发平台源码带绿标

内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍 60gx版APP分发系统在线IOS免签封包分发平台源码免签封装带绿标已对接码支付这个源码某站卖300，主要是因为他有几个功能比较好。支持一键IOS在线免签封装。买源码可免费协助…...

编程新知 2026/5/21 12:06:01

110页PPT的大数据产品设计和应用，含整体方案和多个行业案例，满分PPT

📘【文档介绍】🌐《大数据应用型产品设计方法及行业案例介绍》PPT共110页可编辑文档，它将是你招投标、行业解决方案的重要参考资料。 🔑【掌握大数据，引领企业未来】作为企业管理者，需要的不仅是管理智慧&…...

编程新知 2026/5/21 11:57:51

高校生必备的AI论文写作软件有哪些？

国内高校学生普遍使用的AI论文写作工具，以功能全面的本土化软件为主，结合通用大模型与专业辅助工具，覆盖选题构思、框架搭建、初稿撰写、内容降重、查重检测、格式排版等关键环节，以下是主流工具详解与对比： 一、本土全…...

编程新知 2026/5/21 10:37:33

基于智能体的企业级自主决策与业务运营平台解决方案：AI智能管理驾驶舱、智能管理驾驶舱的四大功能定位、总体方案蓝图、总体规划方案

该方案提出以AI大模型与智能体为核心的“智能管理驾驶舱”，通过整合企业私有数据及业务系统，实现从信息呈现、自主决策到自动执行的业务闭环。平台支持事件驱动、可视化编排与多智能体调度，覆盖生产、供应链等典型场景，旨在降低运…...

编程新知 2026/5/21 7:04:31

线下技术沙龙：AI Coding深度实践LLM应用分享

活动简介我们正在经历一场软件开发范式的变革。从Copilot的智能补全，到Cursor的对话式编程，再到Agent自主完成复杂任务——代码的编写方式，正在被重新定义。但这场变革的核心，不是工具本身，而是使用工具的人。本…...

编程新知 2026/5/21 7:00:25

Zabbix监控华为防火墙丢包？可能是你的SNMP v2c配置没做对（附Python巡检脚本）

Zabbix监控华为防火墙丢包问题的深度排查与自动化解决方案当Zabbix监控华为防火墙时出现丢包或数据异常，很多工程师的第一反应是检查网络连通性或Zabbix服务器配置，却忽略了防火墙自身SNMP v2c与安全策略的联动机制。本文将揭示这一常见误区的技术根源&…...

编程新知 2026/5/21 4:49:33

一、html页面上传图片

二、vue选择图片和上传图片

三、表单中上传图片

相关文章：