Vue使用阿里云OSS上传文件步骤

本文详细介绍了如何在Vue项目中使用阿里云OSS SDK进行文件上传的步骤,包括通过npm安装SDK,配置文件aliOss.js的创建以及在edit.vue组件中的具体使用方法。

步骤一:用npm安装SDK
cnpm install ali-oss

步骤二:安装完成后,在配置文件中调用和配置参数
新建一个配置文件aliOss.js
可使用 import 或 require 进行引用

//调用阿里云OSS
const OSS = require('ali-oss');

export function infoClient() {
  //配置阿里云的参数
  const client = new OSS({
    region: 'oss-cn-beijing',                                                      //地域
    endpoint: 'oss-cn-beijing.aliyuncs.com',                                       //访问域名
    accessKeyId: 'LTAI0gl8ZuaOE9Xv',                                               //标识用户ID
    accessKeySecret: 'qVRcgIYx4bNswX3HPpfSMODVMN9YRA',                             //用户验证签名密钥
    bucket: 'toc-park-business',                                                   //存储空间
    secure: true
  })
  return client
}

步骤三:使用方法
在edit.vue页面中

//导入上传文件到阿里云
import { infoClient } from '@/utils/aliOss';
   //覆盖默认的上传行为,可以自定义上传的实现
    async fnUploadRequest(file) {
      try {
        
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值