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

vue+element上传图片

一、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 中用于创建一个指向 BlobFile 对象的临时 URL 的方法。这种方法非常有用,尤其是在处理文件上传或生成动态内容时,比如图像预览。imageUrl.value = URL.createObjectURL(uploadFile.raw);

  1. 生成临时 URL: 它为 BlobFile 对象生成一个可以在浏览器中使用的 URL。这个 URL 是临时的,仅在页面生命周期内有效。

  2. 文件预览: 在用户选择文件后,可以使用这个 URL 显示图像预览。比如,当用户上传一张图片时,可以生成这个 URL 并将其设置为 <img> 标签的 src 属性。

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

  1. 使用 Axios 请求获取图片的 Blob 数据。
  2. 将 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> <…...

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

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

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…...

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

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

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

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

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

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

电赛入门之软件stm32keil+cubemx

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

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

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

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

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

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) /…...

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

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

qt QComboBox详解

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

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

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

WPF触发器

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

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

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

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

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

Redis 初学者指南

Redis 初学者指南 1. 什么是 Redis&#xff1f;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. 高级特性…...

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

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

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

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

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

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...