Ajax-图片上传

图片上传#

1. 获取图片文件对象
2. 使用 FormData 携带图片文件

   const fd = new FormData()
   fd.append(参数名,值)

3. 提交表单数据到服务器，使用 图片url网址

文件选择上传图片到服务器，使用服务器返回的url地址显示图片到页面

案例-页面更换背景#

1. 选择图片上传，设置body背景
2. 上传成功后， 本地 保存url网址
3. 网页运行后，获取url网址使用

更换背景

// 案例-页面更换背景
document.querySelector('.bgimg').addEventListener('change', function(e) {
    // 1.选择图片作为背景图
    const fd = new FormData()
    fd.append('img', e.target.files[0])
    axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'post',
        data: fd
    }).then(res => {
        console.log(res.data.data.url);
        const imgurl = res.data.data.url
        document.querySelector('body').style.background = `url(${imgurl})`
        // 2.上传成功后，将图片地址保存到本地
        localStorage.setItem('bgImg', imgurl)
    })
});
// 3.网页加载从本地取出背景图url并设置
const bgUrl = localStorage.getItem('bgImg');
// 本地有背景图url才设置
bgUrl && (document.querySelector('body').style.background = `url(${bgUrl})`)