Vue上传文件到 oss

VUE项目中遇到将文件上传到阿里 oss中

1.安装 ali-oss

npn install ali-oss --save

2.在utils 文件下创建 client.js

//Client.js 
const OSS = require('ali-oss');

export default function Client(data) {
   
    //后台返回数据
    return new OSS({
   
        region: data.region,
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        stsToken: data.security,
        bucket: data.bucket
    })
}

3.封装请求方法（也可以不封装、直接在组件中请求即可、看个人项目需求）

import request from '@/utils/request'

/** 文件上传 */
export function getuploadtoken(data) {
   
    return request({
   
        url: '/api/getuploadtoken',
        method: 'post',
        data
    })
} 

4.创建一个公共组件（文件上传）用elementUI 的上传组件上传

<template>
  <!--在此处添加渲染的内容-->
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      drag
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :http-request="handleHttpRequest"
      :headers="uploadHeaders"
      :limit="files"
      :disabled="disabled"
      multiple
      action
      :file-list="fileList"
    >