（前后端交互式）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.url        document.querySelector('.my-img').src = imgUrl      })    })

网站背景更换

• 目标：网站-更换背景

• 1. 选择图片上传，设置body背景
• 2. 上传成功时，"保存"图片url网址
• 3. 网页运行后，"获取"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})`)

来源地址：https://blog.csdn.net/Forever_Hopeful/article/details/132067828