头像上传案例 (上传文件)

最新推荐文章于 2024-04-12 16:47:25 发布

学习吖

最新推荐文章于 2024-04-12 16:47:25 发布

阅读量711

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_68531033/article/details/124689458

版权

// 步骤:

/*文件上传思路总结

1. 给file表单注册onchange事件

* 当用户选择图片之后执行

2. 获取用户选择的文件

*let file= this.files[0]

3. 使用FormData处理文件

let浮动=new FormData()

fd.append('参数名',文件对象)

* 只有FormData才可以上传文件

4. 发送ajax请求

* 文件上传请求方法一定是post, 且请求参数必须为 FormData对象

(1)FormData会自动帮你的请求头设置成文件请求头 :

(2)FormData 会自动帮你的文件转成二进制

文件上传事件含参数请求方式为post 一定要加FormData() 方法

<style>
    .thumb-box {
      margin: 80px;
    }

    .thumb {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/01.png" class="img-thumbnail thumb" alt="">
    <div class="mt-2">
      <!-- 文件选择框 -->
      <input type="file" id="iptFile" accept="image/* "style="display:none" >
      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-success" id="btnChoose">选择图片</button>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>

  <!-- 书写自己的js -->
  <script>
    // 步骤:
    // 1.点击按钮，触发input的点击事件;
    // 2.选择图片后，立刻触发事件;( change )
    //    2.1 获取图片对象，生成一个 FormData 
    //    2.2 发送 ajax, 响应后，把图片渲染到页面;

document.querySelector('#btnChoose').addEventListener('click',function(){
  document.querySelector('#iptFile').click()
})
// 给表单加change事件
document.querySelector('#iptFile').addEventListener('change',function(){
  // 获取file的属性值
  console.log(this.files);
  // 图片索引值为0
  let file=this.files[0]
  let  fd=new FormData()
  fd.append('avatar',file)
  axios({
    url:'http://www.liulongbin.top:3009/api/upload/avatar',
    method:'post',
    data: fd,
   
  }).then(res=>{
    //成功回调
    console.log(res)
    document.querySelector('img').src=`http://www.liulongbin.top:3009${res.data.url}`
  })
})
  </script>
</body>

详细解析步骤如下

document.querySelector('#iptFile').addEventListener('change',function(){
    //     // this :file表单
    //     // 2.获取用户选择的文件
    //     console.log(this.files);
    //     let file=this.files[0]
    //     //3 文件数据必须要使用内置对象 FormData
    // //  (1)文件请求头不一样 :multipart/form-data
    // // *FormData会自动帮你设置请求头
    // // (2) 文件格式是 二进制传输
    // //  *FormData 会自动把你的文件编程二进制传输
    // let fd=new FormData()
    // // 追加参数 fd.append('参数名',文件数据)
    // fd.append('avatar',file)

    // // 4.发送ajax设置参数为fd
    // axios({
    //   url:'http://www.liulongbin.top:3009/api/upload/avatar',
    //   method:'post',
    //   /* 细节 这里参数直接写浮动,千万不要{fd},因为fd本身就是对象类型 ,不需要单独{}包起来  */
    //   data: fd,

    // }).then(res=>{
    //   //成功回调
    //   console.log(res)
    //   // 渲染图片
    //   document.querySelector('img').src=`http://www.liulongbin.top:3009${res.data.url}`
    // })
    //   })
    document.querySelector('$1').addEventListener('change', function () {
      // 2.获取用户选择的文件
      console.log(this.files);
      let file = this.files[0]
      // (2) 文件格式是 二进制传输
      //  *FormData 会自动把你的文件编程二进制传输
      let fd = new FormData()
      // 追加参数 fd.append('参数名',文件数据)
      fd.append('参数名', file)
      // 4.发送ajax设置参数为fd
      axios({
        url: 'http:地址',
        method: 'post',
        /* 细节 这里参数直接写浮动,千万不要{fd},因为fd本身就是对象类型 ,不需要单独{}包起来  */
        data: fd,

      }).then(res => {
        //成功回调
        console.log(res)
        // 渲染图片
        document.querySelector('img').src = `http:基地址${res.data.url}`
      })
    })

渲染在页面上


 //(1)给file表单注册onchange事件
 document.querySelector('#heroIcon').addEventListener('change',function(){
          //(2)获取用户选择的文件
          let file = this.files[0]
          //(3)将文件对象 转成 url路径
          let url = URL.createObjectURL(file)
          //(4)将url设置给img标签src属性
          document.querySelector('.preview').src = url
        })

学习吖

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
头像上传案例 (上传文件)

// 步骤:/*文件上传思路总结1. 给file表单注册onchange事件 * 当用户选择图片之后执行2. 获取用户选择的文件 *let file= this.files[0]3. 使用FormData处理文件let浮动=new FormData()fd.append('参数名',文件对象) * 只有FormData才可以上传文件4. 发送ajax请求 * 文件上传请求方法一定是post, 且请求参数必须为 FormData对象...
复制链接

扫一扫