html图片上传回显

最新推荐文章于 2024-04-23 02:00:49 发布

前端榴脆骨

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量174

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/lllcuigu/article/details/133695091

版权

参考黑马

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传</title>
</head>

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">
  
  
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
<script>
    
    // 文件选择元素->change改变事件
    document.querySelector('.upload').addEventListener('change', e => {
      // 1. 获取图片文件
      console.log(e.target.files[0])
      // 2. 使用 FormData 携带图片文件
      const data = new FormData()
      data.append('img', e.target.files[0])
      // 3. 提交到服务器，获取图片url网址使用
      axios({
        url: '路径',
        method: 'POST',
        data
      }).then(result => {
        console.log(result)
        // 取出图片url网址，用img标签加载显示
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
      })
    })
  </script>
</body>
 
</html>