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

news/2024/4/15 5:14:55

前后端交互图片文件

上传-图片

注意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})`)

http://www.ppmy.cn/news/1004649.html

相关文章

SphereEx-DBPlusEngine 1.5.0 功能解读:CDC

前一段时间,面向新一代数据架构的数据库增强引擎 SphereEx-DBPlusEngine 正式发布 1.5.0 版本,新增 CDC 和数据库防火墙两大重磅功能,本篇文章笔者就给大家详细介绍 CDC 功能的实现逻辑和技术细节。 CDC CDC(Change Data Captur…

高频交易学习——上期SimNow开通

property 是 Python 中的一个装饰器(decorator),用于定义类的属性。它可以将方法转换为相应的特性(property),从而实现属性的访问和修改控制。 property 装饰器的作用是将一个方法变成一个只读属性&#x…

WebSocket整合直播

由于浏览器不支持对于rtmp协议推拉流,所以需要后台对传输的数据进行处理,将数据转接,为了实现其实时性,使用websocket将数据传输 先使用obs和vlc测试正常的推拉流是否正常 然后在跑本地后台传输视频 使用JavaCV技术传输音视频 …

Android LinearLayout dynamic add child ImageView,Glide load,kotlin

Android LinearLayout dynamic add child ImageView&#xff0c;Glide load&#xff0c;kotlin images.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"andro…

WPF上位机7——MySql

MySql DML语句 db操作、表操作 字段的数据类型 修改表 表的数据操作 DQL语句 数据查询和去重查询 条件查询 模糊查询 聚合查询 分组查询 排序查询 分页查询 DCL语句 函数 字符串处理函数 数值函数 日期函数 流程函数 约束 外键约束 多表查询 内连接 外连接 自连接 子查询 列…

用于永磁同步电机驱动器的自适应SDRE非线性无传感器速度控制(MatlabSimulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

只保留一天最近日期的 xx 字段

目录 背景数据库表 需求目标SQL知识点注意点 背景 数据库 PostgreSQL 表 tbl_hos_score create_timehospital_namescore2023-08-03 08:20:04广东医院872023-08-03 12:00:06广东医院872023-08-04 08:20:09浙江医院842023-08-04 12:00:17浙江医院84……… 需求 只需保留一…

react面试之context的value变化时,内部所有子组件是否变化

上测试代码 // context const state {a: 1,b: 1, } const context createContext(state);export default context; // A组件 const A () > {const { a } useContext(context);return (<div>{a}</div>) } export default A;// B组件 const B () > {cons…

Windows下QT Creator安装MinGW 32bit编译器

前言 注&#xff1a;本作者是基于FFmpeg开发需要&#xff0c;故在Windows下QT Creator中安装MinGW 32bit编译器&#xff01;其它型号编译器参照此文章基本可以实现&#xff01; 一、下载需要的编译器 1、下载链接 链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/…

MyBatis-基础操作-CRDU

目录 根据id删除数据&#xff08;D&#xff09; 新增员工数据&#xff08;C&#xff09; 更新员工信息 &#xff08;U&#xff09; 根据主键修改员工信息 查询员工信息&#xff08;R&#xff09; 根据id查询 条件查询 前端页面展示提供对于数据的删除操作&#xff0c;后端…

codeforces Split Into Two Sets

Polycarp was recently given a set of n (number n — even) dominoes. Each domino contains two integers from 11 to n. Can he divide all the dominoes into two sets so that all the numbers on the dominoes of each set are different? Each domino must go into e…

AOP实现日志记录

AOP实现日志记录 自定义注解方式 实现 1、总体图 2、注解类SystemLog SystemLog package com.sangeng.annotation; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.ann…

appium自动爬取数据

爬取类容&#xff1a;推荐知识点中所有的题目 爬取方式&#xff1a;appium模拟操作获取前端数据 入门级简单实现&#xff0c;针对题目和答案是文字内容的没有提取出来 适用场景;数据不多&#xff0c;参数加密&#xff0c;反爬严格等场景 from appium import webdriver impor…

javaScript 树形结构 递归查询方法。

1. 函数递归定义 程序调用自身的编程技巧称为递归&#xff08; recursion&#xff09;。 2.使用条件 1.存在限制条件&#xff0c;当满足这个限制条件的时候&#xff0c;递归便不再继续。 2.每次递归调用之后越来越接近这个限制条件。 3.既然是自己调用自己&#xff0c;那么整个…

如何快速完成 App 安全评估报告【最快当天完事】

文章目录 1. App下架展示2. 检查App是否存在问题3. 注册《安全评估》 信息4. 人工快速干预&#xff0c;加快审核步骤5. 面审阶段6. 后续 1. App下架展示 在华为应用市场上架的App突然间被下架&#xff0c;把我搞得猝不及防&#xff0c;原因如下&#xff1a; 是因为我们缺少 《…

Linux一阶段复习

Linux之父是林纳斯本纳第克特托瓦兹 Apache发布目录&#xff1a;/var/www/html nginx发布目录&#xff1a;/usr/share/nginx/html/ 配置dns的文件 &#xff1a; /etc/resolv.conf nginx的配置文件&#xff1a;/etc/nginx/ yum源的配置文件&#xff1a;/etc/yum.repos.d/ …

使用IDEA操作Mysql数据库

idea中自带了关于数据库的连接 首先要确保你的MySQL正在运行中 打开idea找到database&#xff08; view —> Tool Windows —> database&#xff09;&#xff0c;大家也可以定个快捷键&#xff0c;方便以后日常操作 就是这个样子&#xff0c;然后点加号 然后就可以编写执…

【MySQL】仓储--维护出入库流水、库存,去重数量逻辑修正

系列文章 C#底层库–MySQLBuilder脚本构建类&#xff08;select、insert、update、in、带条件的SQL自动生成&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类&#xff08;推荐阅读&#xff0…

【1++的C++进阶】之多态

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的C进阶】 文章目录 一&#xff0c;什么是多态&#xff1f;二&#xff0c;剖析多态的调用原理三&#xff0c;抽象类四&#xff0c;多继承中的虚函数表 一&#xff0c;什么是多态&#xff1f; …

【沁恒蓝牙mesh】CH58x flash分区与数据存储管理

本文主要介绍了 沁恒蓝牙芯片 CH58x 的flash 分区与数据存储管理 &#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是喜欢记录零碎知识点的小菜鸟。&#x1f60e;&#x1f4dd; 个人主页&#xff1a;欢迎访问我的 Ethernet_Comm 博客主页&…
最新文章