一: 了解整体思路:

image.png
image.png

步骤一: 封装upload公共组件做文件上传:

基于elementUI的upload组件封装一个通用的上传组件供业务组件使用

  1.     ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625165633002-d254323b-5ff5-441a-8cb4-ac7bd39859d6.png#clientId=ueac0eb95-de19-4&from=paste&height=381&id=ucf7957ea&margin=%5Bobject%20Object%5D&name=image.png&originHeight=381&originWidth=564&originalType=binary&ratio=1&size=101652&status=done&style=none&taskId=uef81b581-f378-4bf0-ad62-583ace8278d&width=564)

1. 创建UploadImg 公共组件(给别人当儿子用) 放在

src/components/UploadImg ,全局组件,看自己需求: 是放在main.js下

面还是Vue.use()下

2. 这是修改过的,完整的去官网上看看吧

  1. <template>
  2.   <div>
  3.     <!--
  4.       show-file-list: 是否显示上传的文件列表
  6.       action: '#' 用来指定文件要上传的地址，由于我们需要定制上传动作
  7.                   这里设为#
  8.       :http-request：自定义上传行为（重点）
  10.       on-success: 上传成功之后的回调
  11.       before-upload： 上传之前的检查
  12.       :on-success="handleAvatarSuccess"
  13.     -->
  14.     <el-upload
  15.       class="avatar-uploader"
  16.       action="#"
  17.       :show-file-list="false"
  18.       :before-upload="beforeAvatarUpload"
  19.       :http-request="upload"
  20.     >
  21.       <img v-if="imageUrl" :src="imageUrl" class="avatar">
  22.       <i v-else class="el-icon-plus avatar-uploader-icon" />
  23.     </el-upload>
  24.   </div>
  25. </template>
  26. <script>
  27.   export default {
  28.       methods:{
  29.        // 覆盖默认的上传行为，可以自定义上传的实现
  30.          upload(params){
  31.              console.log(params)
  32.          }
  33.       }
  34.   }
  35. </script>

效果图:

image.png通过点击或者拖拽上传文件

步骤二: 上传图片到腾讯云

前置准备: 在云服务器上面: 申请cos服务器,配置密钥,设置cors访问

目标:: 用前面注册的对象存储功能,将图片上传到腾讯云,根据cos的上传API实现上传功能,

1. 安装依赖:

  1. npm i cos-js-sdk-v5 --save

2. 实例化cos对象

  1. // 下面的代码是固定写法
  2. const COS = require('cos-js-sdk-v5')
  3. // 填写自己腾讯云cos中的key和id (密钥)
  4. const cos = new COS({
  5.   SecretId: 'xxx', // 身份识别ID
  6.   SecretKey: 'xxx' // 身份秘钥
  7. })

上面的SecretId和SecretKey在这里可以找到:

  1.          ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625225930134-180dcc91-a89a-45a6-b061-cc9ecd0c0897.png#clientId=u92834176-2cbe-4&from=paste&height=517&id=ufe0a3e52&margin=%5Bobject%20Object%5D&name=image.png&originHeight=517&originWidth=570&originalType=binary&ratio=1&size=92382&status=done&style=none&taskId=u18e5ccde-6647-4445-96b7-c607c3edc14&width=570)

3. 使用cos对象完成上传:

要是用cos.putObjectapi来完成上传功能，代码如下：

  1. // 定义在methods里面
  2. upload(res) {
  3.   if (res.file) {
  4.     // 执行上传操作
  5.     cos.putObject({
  6.       Bucket: 'xxxxxx', /* 存储桶 */
  7.       Region: 'xxxx', /* 存储桶所在地域，必须字段 */
  8.       Key: res.file.name, /* 文件名 */
  9.       StorageClass: 'STANDARD', // 上传模式, 标准模式
  10.       Body: res.file // 上传文件对象
  11.     }, (err, data) => {
  12.       console.log(err || data)
  13.       // 上传成功之后
  14.       if (data.statusCode === 200) {
  15.         // 注意这里!!!已经拿到了cos返回给我们的头像地址了!!!!拿到了以后就要用它来操作下面的事情了(子传父,把这个头像给父亲,然后父亲保存在本地接口)
  16.         this.imageUrl = `https:${data.Location}`   
  17.       }
  18.     })
  19.   }
  20. }
  1.         ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625226163913-841a7bb0-ff90-4234-b00b-ba05a4766cc5.png#clientId=u92834176-2cbe-4&from=paste&height=442&id=u78f3be14&margin=%5Bobject%20Object%5D&name=image.png&originHeight=442&originWidth=570&originalType=binary&ratio=1&size=61068&status=done&style=none&taskId=u99a6f39d-6ce2-4c79-aadf-ac9c75c551f&width=570)

步骤三: 在用户详情页中使用

上面两个步骤都是定义在upload组件中的, 接下来的步骤就是在父组件使用

思路:

1. 初始时显示： 在获取员工详情时，拿到员工的头像之后，让上传组件来显示头像；
2. 在保存修改时：从上传组件中获取图片上传到cos之后的地址，再调用接口做上传本项目的服
务器

1. 回显头像方法一: 通过ref

子组件上引用: ref=staffPhoto

  1. async loadUserDatailById() {
  2.       const res = await getUserDetailById(this.userInfo.id)
  3.       console.log('获取个人信息', res)
  4.       this.userInfo = res.data
  6.       // 把头像地址 给子组件显示出来 
  7.       this.$refs.staffPhoto.imageUrl = res.data.staffPhoto
  8.     },

2. 更新数据

  1. 在更新请求里面,把刚刚子给我们的地址 保存在服务器
  2.  代码就不演示了,就是发送保存的ajax,然后:
  3.        // 注意更新头像地址
  4.           this.userInfo.staffPhoto = this.$refs.uploadImg.imageUrl

回显方法2: v-model-简直太重要了,面试可能还会问到

面试官: 你有在自定义的组件上用过v-model吗?

1. 代码:

  1. <el-form-item label="员工头像">
  2.   <!-- <img :src="userInfo.staffPhoto"> -->
  3.   <!-- 放置上传图片 -->
  4.   <Upload v-model="userInfo.staffPhoto" />
  5. </el-form-item>

分析: 背后做的事情: 也是依据这个来的

  1. <com v-model="imageUrl" />
  3. 上面的写法等价于:
  4. <com :value="imageUrl" @input="val=>imageUrl=val" />
  5. 1. 给子组件内部传一个名为value的属性，属性值就是绑定的数据项
  6. 2. 在子组件监听一个名为input的事件，回调函数是：将收到的参数值保存到数据项中
  1.                 ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625227091434-f7640ebc-cf73-44c0-9e1f-a464ddbd4880.png#clientId=u92834176-2cbe-4&from=paste&height=214&id=u9a0d9621&margin=%5Bobject%20Object%5D&name=image.png&originHeight=214&originWidth=524&originalType=binary&ratio=1&size=24641&status=done&style=none&taskId=u08b243f7-91ba-44e7-bd90-a696cf05481&width=524)

代码我就不写了,直接看图吧:

image.png
image.png