图片上传
步骤
<!-- 文件选择元素 --><input type="file" class="upload"><br><!-- 上传的图片出于安全不能使用url使用,智能做背景使用 --><img src="" alt=""><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标,图片上传,显示到网页上// 1.获取图片文件// 2.使用FormData携带图片文件// 3.提交到服务器,获取图片url地址使用document.querySelector('.upload').addEventListener('change', e => {// 文件上传按钮,选择的文件会保存在事件对象中// 1.获取选择的图片资源console.log('', e.target.files[0]);// 调用接口上传数据 form-data数据格式const fd = new FormData()//form-data数据必须使用fd('键',值)的格式追加属性fd.append('img', e.target.files[0])// console.log('',fd);无法使用console.log()打印数据,智能使用for(let k in fd)循环的方式axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(res => {console.log(res);document.querySelector('img').src = res.data.data.url})})</script>