vue中使用ali-oss上传文件到阿里云上

1.使用 npm 安装ali-oss

javascript 复制代码
npm install ali-oss --save

2.写ali-oss.js

javascript 复制代码
// 引入ali-oss
let OSS = require('ali-oss')
let client = new OSS({
  region: 'oss-cn-xxx', // bucket所在的区域, 默认oss-cn-hangzhou
  secure: true, // secure: 配合region使用,如果指定了secure为true,则使用HTTPS访问
  accessKeyId: '', // 通过阿里云控制台创建的AccessKey
  accessKeySecret: '', // 通过阿里云控制台创建的AccessSecret
  bucket: 'xxxxx', // 通过控制台或PutBucket创建的bucket
})
export const put = async (ObjName, fileUrl) => {
  try {
    let result = await client.put(`${ObjName}`, fileUrl)
    // ObjName为文件名字,可以只写名字,就直接储存在 bucket 的根路径,如需放在文件夹下面直接在文件名前面加上文件夹名称
    return result
  } catch (e) {
    console.log(e)
  }
}

3.使用element ui的 upload 组件进行上传

javascript 复制代码
<template>
  <div>
   <el-upload
     class="upload-demo"
       action
       drag
       :http-request="handleUploadOss"
       :before-upload="beforeUploadOss"
     >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text" v-loading="uploadLoading">将文件拖到此处,或<em>点击上传</em></div>
     </el-upload>
  </div>
</template>
<script>
import {put} from '@/utils/ali-oss'
export default {
data() {
    return {
    },
    methods: {
    beforeUploadOss(file) {
      // console.log(file)
      // 限制上传类型
      const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) ==='.pdf' || this.getFileName(file.name) ==='.xlsx' || this.getFileName(file.name) ==='.zip'
      //限制的上限为500Mb
      const maxSize = file.size / 1024 / 1024 < 500;
      if (!fileExtensions) {
        this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式, .xlsx 格式, .zip 格式!');
      }
      if (!maxSize) {
        this.$message.error('上传文件大小不能超过 500MB!');
      }
      // return fileExtensions && max20M;
      return maxSize
    },
    getFileName(name){
       return name.substring(name.lastIndexOf('.'))
    },
    handleUploadOss(option) {
      let objName = option.file.name
      let fileName = moment().format('YYYY/MM/DD')
      this.uploadLoading = true
      put(`${fileName}/${objName}`, option.file).then(res => {
        console.log(res)
        if (res.res.statusCode === 200) {
          this.$message.success('上传成功')
        }else{
          this.$message.error('上传失败')
        }
      }).catch((err) => {
      })
    },
   } 
}

}
</script>
相关推荐
中微子9 分钟前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子1 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则2 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele3 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4533 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6733 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友3 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir3 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴4 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子4 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js