vue + element-ui + 阿里云oss服务端签名后直传实践

最新推荐文章于 2024-08-26 09:17:12 发布

前端彭于晏Eddie

最新推荐文章于 2024-08-26 09:17:12 发布

阅读量4k

点赞数 4

分类专栏：踩坑记录文章标签： upload vue 前端 elementui OSS

本文链接：https://blog.csdn.net/weixin_45495667/article/details/111588974

版权

本文介绍了在Vue项目中结合Element-UI组件，利用阿里云OSS服务端签名的方式实现文件直传的安全实践。通过在BeforeUpload钩子中调用后端获取签名信息，确保了AccessKey ID和AccessKey Secret不被暴露，从而提高安全性。文章还展示了如何封装并使用上传子组件的示例代码。

摘要由CSDN通过智能技术生成

vue + element-ui + 阿里云oss服务端签名后直传实践

采用JavaScript客户端直接签名（参见JavaScript客户端签名直传）时，AccessKey ID和AcessKey Secret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的方案。

服务端签名后直传的流程如图所示

以element-ui组件为例，上传前BeforeUpload先调用后端的policy接口获取签名信息，然后带着签名等信息和图片直接上传到aliyun的OSS。
封装上传子组件

<template>
  <div>
    <el-upload
      action="http://colablog.oss-cn-shenzhen.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">