前端vue通过oss直接上传文件到阿里云

番茄and西红柿

已于 2022-05-11 18:01:45 修改

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端阿里云

于 2022-03-01 14:35:49 首次发布

本文链接：https://blog.youkuaiyun.com/ddsuuny/article/details/123205329

本文介绍如何在Vue.js前端应用中，通过后端获取OSS所需的参数，实现直接将文件上传到阿里云对象存储服务（OSS）。特别提醒，上传时需设置headers以避免Vue报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过后端获取oss需要的参数

注意：oss时要加上headers，否则vue会报错

原码：uploadByOss.vue

<template>
  <div>
    <el-upload
      ref="uploadMutiple"
      action=""
      :show-file-list="false"
      :multiple="true"
      :limit="limit"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
    >
      <el-button
        slot="trigger"
        size="small"
        type="primary"
        :disabled="btnDisabled"
        >{
  
  { btnText }}</el-button
      >
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        支持格式
        <template v-if="fileType"> {
  
  { fileType.join("/") }},</template>
        <template v-if="fileSize"> 单个文件不能超过 {
  
  { fileSize }}MB,</template>
        <template v-if="limit"> 且最大数量为 {
  
  { limit }} </template>
      </div>
    </el-upload>
    <el-table
      :data="fileList"
      style="width: 100%"
      v-if="fileList.length > 0"
      border
    >
      <el-table-column prop="name" :show-overflow-tooltip="true" label="名称">
        <template slot-scope="scope">
          <i style="color: #409eff" class="el-icon-s-order" />{
  
  {
            scope.row.name
          }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="是否成功">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 'success'">上传成功！</template>
          <template v-else-