前后端交互图片文件
上传-图片
注意1:上传的图片必须在2MB以内
注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问
请用img/背景图方式进行使用
上传图片的代码实现
\* 目标:图片上传,显示到网页上
* 1. 获取图片文件
* 2. 使用 FormData 携带图片文件文章来源:https://www.toymoban.com/news/detail-634055.html
* 3. 提交到服务器,获取图片url网址使用文章来源地址https://www.toymoban.com/news/detail-634055.html
// 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.url
document.querySelector('.my-img').src = imgUrl
})
})
网站背景更换
- 目标:网站-更换背景
-
- 选择图片上传,设置body背景
-
- 上传成功时,"保存"图片url网址
-
- 网页运行后,"获取"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上传图片 + 更换背景图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!