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

(前后端交互式)Ajax上传图片 + 更换背景图片

前后端交互图片文件

上传-图片

注意1:上传的图片必须在2MB以内
注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问
请用img/背景图方式进行使用


上传图片的代码实现

 \*  目标:图片上传,显示到网页上

* 1. 获取图片文件

* 2. 使用 FormData 携带图片文件

* 3. 提交到服务器,获取图片url网址使用


    // 1.获取选择文件按钮,同时注册一个变化事件document.querySelector('.upload').addEventListener('change', e => {console.log(e.target.files[0])// 2. 使用 FormData 构造函数 携带图片文件夹const imgs = new FormData()// 调用实例对象中 append 方法,传入图片imgs.append('img',e.target.files[0])// 3. 提交到服务器,获取图片url网址使用axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: imgs}).then(result => {console.log(result.data.data)const imgUrl = result.data.data.urldocument.querySelector('.my-img').src = imgUrl})})

网站背景更换

  • 目标:网站-更换背景
    1. 选择图片上传,设置body背景
    1. 上传成功时,"保存"图片url网址
    1. 网页运行后,"获取"url网址使用

  • 在上传图片的基础上增加了存储到本地的功能需求,同时没有url返回,不执行更换背景。
//1、选择图片上传,给body设置背景图片
// 1.2 获取按钮进行上传
document.querySelector('.bg-ipt').addEventListener('change', e => {console.log(e.target.files[0])// 表单事件对象const fd = new FormData()fd.append('img' , e.target.files[0])axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {const res = result.data.data.url// 更换body的背景图document.body.style.backgroundImage = `url(${res})`// 2、上传成功时,"保存"图片url网址 到本地,防止刷新丢失localStorage.setItem('bgImg',res)})
})// 3. 网页运行后,"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
// 逻辑与中断,本地有服务器提交后的url的话,那么就执行后面的,否则为空值不执行
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

相关文章:

(前后端交互式)Ajax上传图片 + 更换背景图片

前后端交互图片文件 上传-图片 注意1:上传的图片必须在2MB以内 注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问 请用img/背景图方式进行使用 上传图片的代码实现 \* 目标&#…...

自媒体常见玩法

有声小说转成视频 题材来源 喜马拉雅 工具 https://trace.moe/ 33台词找台词 文字转视频 题材来源 小说类APP书籍 音乐转视频...

【react】react生命周期钩子函数:

文章目录 一、生命周期概念:二、生命周期:三、挂载阶段(constructor > render > componentDidMount):四、更新阶段(render > componentDidUpdate):五、卸载阶段(componentWillUnmount …...

CRM系统哪些功能可以个性化定制?

不同的企业有着不同的业务流程和需求,因此在选型时就需要一款可以个性化定制的CRM系统。下面说说可以个性化定制的CRM系统的功能和优势。 如何实现个性化定制? Zoho CRM支持个性化定制,您可以创建自定义功能模块、字段以及业务流程&#xf…...

51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验二 LED闪烁

目录 前言 一、原理图及知识点介绍 二、代码分析 知识点四:delay(u16 i)这个函数为什么i1时,大约延时10us? 前言 已经是第二个实验了,上一个实验是点亮第一个LED灯,这个实验是LED的闪烁。 一、原理图及知识点介绍…...

PaperEdge 文档图像矫正

效果 地址: https://github.com/cvlab-stonybrook/PaperEdge...

入门NLTK:Python自然语言处理库初级教程

NLTK(Natural Language Toolkit)是一个Python库,用于实现自然语言处理(NLP)的许多任务。NLTK包括一些有用的工具和资源,如文本语料库、词性标注器、语法分析器等。在这篇初级教程中,我们将了解N…...

Android 死机问题学习笔记

和你一起终身学习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一、死机系统简图二、死机的可能原因三、死机问题需要分析哪些数据四 、Java Backtrace 分析五、常见 Java backtrace 举例六、Native Backtrace七、Ke…...

企业内网终端安全无客户端准入控制技术实践

终端无代理/无客户端准入控制技术因其良好的用户体验而倍受创新企业的青睐。无代理/无客户端准入控制技术,顾名思义,是一种在网络中对终端实施访问控制的方法,无需依赖特定的客户端软件。 不同于银行、医院等传统行业的终端准入控制需求&…...

Android 开发代码规范

一. AndroidStudio开发工具规范 使用最新的稳定版本.统一文件的编码格式为utf-8. 清除每个类里面的无效的import导包.代码样式统一,比如,tab缩进4个空格,或者 tab size等如果没有特殊情况使用默认的配置即可。每行字数每行字符数不得超过 160 字符&…...

c语言(函数)

目录 何为函数 库函数 自定义函数 二分查找数组下标 链式访问 函数的声明 函数定义 递归 正向打印数字 打印字符个数 使用临时变量 递归(不使用临时变量) n的阶乘 一般形式 递归 斐波那契数 递归 正常做法 何为函数 在计算机科学中,子程序是一个…...

OPENCV C++(二)直方图+分离颜色通道+画圆画线画矩形

分离RGB彩图颜色通道 也就是把每种分量的亮度图提出来 vector<Mat> channels;split(image1, channels);Mat R channels.at(0);Mat G channels.at(1);Mat B channels.at(2); 这样R,G,B每个图就是这个图的颜色分量图了 图片的克隆&#xff0c;深拷贝&#xff01; Mat…...

SpringBoot(2.7.x)中使用PageHelper

如何在SpringBoot中使用PageHelper 先添加依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.12</version> </dependency>SpringBoot 2.6.x…...

【HarmonyOS】API9网络buffer图片加载

【引言】 HarmonyOS中加载网络图片常用的方法是直接给Image组件添加图片的网络地址&#xff0c;申请网络权限ohos.permission.INTERNET后就可以通过url加载对应的图片了&#xff0c;如HarmonyOS官网中的写法&#xff1a; Image(https://www.example.com/example.JPG) 【问题概…...

【前端实习生备战秋招】—HTML 和 CSS面试题总结(二)

【前端实习生备战秋招】—HTML 和 CSS面试题总结&#xff08;二&#xff09; 1.有哪些方式可以对一个 DOM 设置它的 CSS 样式&#xff1f; 外部样式表&#xff0c;引入一个外部 css 文件内部样式表&#xff0c;将 css 代码放在 <head> 标签内部内联样式&#xff0c;将 c…...

操作系统知识点总结

操作系统知识点总结: 第一章:操作系统概述 1.1操作系统的概念: ​ 操作系统是一种系统软件,与其他系统软件和应用软件不同,它有自己的基本特征。它的四大基本特征也就是并发,共享,虚拟,异步。 1.2操作系统的特征(四大基本特征): 并发: 这里我们要理解什么是并发,什么是…...

(C++) 多线程之生产者消费者问题

文章目录 前言CodeCode运行效果 分解讲解main()class ProducerConsumerProblemproduce()consumer() END 前言 生产者消费者问题_百度百科 (baidu.com) 生产者消费者问题 &#xff08;英语&#xff1a;Producer-consumer problem&#xff09;&#xff0c;也称有限缓冲问题&…...

【C语言学习】逃逸字符(转义字符)

逃逸字符&#xff08;转义字符&#xff09; 1.\" 双引号 \" printf("请分别输入身高的英尺和英寸&#xff0c;""如输入\"5 7\"表示5英尺7英寸:");这里的"\就是双引号的作用&#xff0c;因为在双引号里面直接用双引号无意义&…...

开发手册|Java后端开发规范重点条目整理

Ps&#xff1a;部分熟知的开发规范未收录在本文中&#xff01; 一、编程规约 1.1 命名风格 代码中的命名严禁使用拼音与英文混合的方式 alibaba / taobao / youku / hangzhou 等国际通用的名称可视同英文 类名使用大驼峰的形式命名&#xff0c;例如 UpperCameCase 方法、参数…...

c++11 标准模板(STL)(std::basic_ofstream)(二)

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ifstream : public std::basic_istream<CharT, Traits> 类模板 basic_ifstream 实现文件流上的高层输入操作。它将 std::basic_istrea…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...