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

1.使用 npm 安装ali-oss

npm install ali-oss --save
1

2.写ali-oss.js

// 引入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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58