上传图片常见的套路(使用了腾讯云的储存桶辅助)

238 阅读1分钟

流程具体如下

image.png

一、 使用场景

  1. 我们如果经常用到图片的上传时,可以封装成全局的一个组件使用 v-model 进行绑定即可

二、 实现原理

  1. 我们先要请求后台头像数据存入父组件的data里面图片属性
  2. 然后通过给子组件绑定一个 v-model 给子组件传值,子组件使用props接收后渲染到图片区域
  3. 用户点击更换图片后,下载腾讯云储存桶的包使用其Api向腾讯云上传图片数据并且同时会返回这个图片的url地址
  4. 然后子组件通过$emit向父组件传腾讯云返回的url的值并且赋值给data定义的图片属性,然后子组件也会接收到父组件里面图片地址的更新,子组件也会同步更新,就会重新渲染一直新的图片
  5. 点击保存或者提交之后会发送请求将新的图片url地址存入服务器中