vue3 + ts 直接上传图片到OSS

原创

已于 2024-01-18 15:42:27 修改 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript #前端

于 2024-01-18 15:41:14 首次发布

前言：本文使用服务端生成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 /></el-icon&g