vue3 + ts 直接上传图片到OSS

前言：本文使用 服务端生成PutObject所需的签名URL, 前端凭借签名URL,不依赖oss sdk 直接上传文件。

之前项目都是前端上传文件到服务器，然后由服务器上传到oss，这种情况呢，数据要在网络上传输两次，会导致网络资源浪费，增大服务器的开销，本次采用前端直传的方式来实现图片上传。

原理：

参考：阿里云文档

代码实现

<template>
  <!-- 上传图片组件 -->
  <el-upload
    v-model="imgUrl"
    class="single-uploader"
    :show-file-list="false"
    list-type="picture-card"
    :before-upload="handleBeforeUpload"
    :http-request="uploadFile"
  >
    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
    <el-icon v-if="!progress.showProgress && !imgUrl" class="single-uploader__icon"><Plus />