vue 中移动端项目之图片上传（代码分享+话术总结）

最新推荐文章于 2023-07-09 00:00:00 发布

DJ老邓

最新推荐文章于 2023-07-09 00:00:00 发布

阅读量530

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45819748/article/details/112257460

版权

话不多说先上代码：

点击显示弹框

<van-cell title="头像" is-link @click="avatarShow=true"></van-cell>

显示弹框，再点击从手机相册选择

    <!-- 头像弹出层 -->
    <van-action-sheet v-model="avatarShow" cancel-text="取消">
      <p class="p">
        <van-uploader> 拍照 </van-uploader>
      </p>
      <p class="p">
        <van-uploader :after-read="afterRead"> 从手机相册选择</van-uploader>
      </p>
    </van-action-sheet>

逻辑处理

    // 图片上传
    afterRead(file) {
      // console.log(file)
      // 提取自带文件信息
      let img = file.file
      // console.log(img)
      // 数据序列化
      let data = new FormData()
      // console.log(data)
      // 追加数据到序列化的对象中
      data.append('file', img)
      // 请求接口传入数据
      this.$axios.post('/public/img', data).then((res) => {
        // console.log(res)
        // 请求接口替换后台数据
        this.$axios.put('/user', { avatar: res.data.data.path }).then((res) => {
          // console.log(res)
          // 弹框隐藏
          this.avatarShow = false
          // 重新获取数据，渲染页面
          this.getInfo()
        })
      })
    },

图片上传（话术总结）

我们使用 vant 中的组件 van-uploader 来进行实现图片上传操作。他自身带了一个属性是 :after-read 里面的参数是一个回调函数，这个回调函数是在点击了确定后才会触发。

回调函数的逻辑处理：不明白的话可以根据上面的代码一步一步调式来操作。。。首先可以查看一下他带回来的数据，我们提取出想要的数据，然后进行数据序列化（new FormData()），这一步是重中之重。再将我们提取的数据放入（append）序列化后的对象中，如果是线上接口我们就请求接口进行传入数据，替换后台数据，在进行重新获取数据进行页面渲染，让弹框隐藏，这时候你就会发现头像已经更换成功啦。