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

本文介绍如何在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-
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值