封装：el-upload上传图片组件（解决图片闪动、多选问题）

流程描述：使用el-upload组件，自定义上传方法（调后台接口），传图片file给后台，后台返回对应阿里云的oss链接，前端临时保存，最后点击页面提交按钮，再传后台oss数组链接。

项目遇到问题描述&解决：

1. 将后台返回的oss直接赋值给el-upload对应的file-list属性绑定值对象的url字段时，会出现闪动问题。--默认组件绑定的url是blob链接，如果替换url取值，就会出现闪动问题。
2. 设置multiple多选后，因后台接口限制1秒内不能有重复请求，添加时间戳参数，也会出现上传多张，部分图片的时间戳有的一样的问题，需使用uid（图片文件唯一标志）字段来代替时间戳。

其他待解决问题：（1）粘贴上传图片，不点击输入框，点击粘贴元素所在的行空白处，然后按ctrl+v也会触发粘贴paste事件，即也会自动上传，但此时点击确定所在行，再按ctrl+v又不触发了，失焦导致？ 

注意点：（1）需让后台在返回的文件URL中添加，唯一字符串后缀，如UUID等，确保图片文件名不会重复！ 

效果图：

一、vue2+TS版上传组件：

二、父组件中如何使用&获取上传的列表数据

方法1：通过.sync修饰符

子组件中通过 $emit('update:prop变量名', '传递给父组件的新值') 来实时更新父组件的数据。注意：冒号后不能有空格！否则不生效。

方法2：通过 ref 获取子组件实例

通过 ref 获取上传组件实例，从而获取对应上传url列表数组数据。

其他涉及代码：

// 判断是否是PC端显示
export const isPC = () => {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
  let isPCFlag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      isPCFlag = false
      break
    }
  }
  return isPCFlag
}


// 上传File文件获取OSS链接（仅单个，不支持批量！）
export const getOSSUrlByFile = (data = {}) => {
  return request({ // axios库相关封装的实现，注意需判断formdata类型的post请求不能序列化。
    url: 'xxxxxxxx',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    method: 'post',
    data
  })
}


// 上传类接口（传参为FormData类型的）：不能序列化，否则会被序列化为空对象！
... // axios请求拦截器
if (request.method === 'post' && request.data) {
    if (!(request.data instanceof FormData)) {
      request.data = qs.stringify(request.data)
    }
}