今天在使用 element ui 中 Upload 组件上传图片到阿里云 oss 上折腾了许久，一直被官网 demo 中的 action 困扰，折腾一番后最后放弃了这种方法，选择了 http-request 这种方法，覆盖默认的上传行为，自定义上传的实现。

<el-upload
	class="link-uploader"
	action
	:http-request="handleAvatarSuccess"
	:show-file-list="false">
	  <img
      v-if="dialogForm.picUrl"
      :src="dialogForm.picUrl"
      class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

这里需要先获取 oss 上传签名，获取这种数据

其次，开始自定义上传方法：

handleAvatarSuccess (file) {
  this.toOss(file)
},
async toOss (file) {
  const request = new FormData()
  const imgType = file.file.name.split('.')[1]
  const name = file.file.name.split('.')[0]
  // 文件名字，可设置路径
  const imgName = name + this.UUID() + '.' + imgType
  const imgUrl = `${this.OssParams.host}/${this.OssParams.dir}${imgName}`
  request.append('key', `${this.OssParams.dir}${imgName}`)
  // policy规定了请求的表单域的合法性
  request.append('policy', this.OssParams.policy)
  request.append('OSSAccessKeyId', this.OssParams.accessId)
  // 让服务端返回200,不然，默认会返回204
  request.append('success_action_status', '200')
  request.append('callback', this.OssParams.callback)
  request.append('Signature', this.OssParams.signature)
  // 需要上传的文件filer
  request.append('name', imgName)
  request.append('type', file.file.type)
  request.append('file', file.file)
  await uploadToOss(this.OssParams.host, request)   // 该方法为封装的发送请求到oss的方法
  this.dialogForm.giftImg = imgUrl
},
UUID () {
  let d = new Date().getTime()
  const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (d + Math.random() * 16) % 16 | 0
    d = Math.floor(d / 16)
    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
  })
  return uuid
}

这里使用 form 表单的方法上传的，需要注意的是 upload 组件中 action 是必传参数，所以虽然用不到 action 属性，但是还是要保留该属性，否则会报错。