前端直传阿里云OSS vue2 web端element-ui 组件upload

需求：前端上传文件不经过后端，大文件大视频等也可以快速上传

1.配置好阿里云OSS后获取相关key

最重要的参数：

AccessKey ID：  ************************
AccessKey Secret：  ************************
Bucket ：************
fileHost： https://************.oss-cn-shenzhen.aliyuncs.com
fileHost中间一般为Bucket 拼接
1.安装 ali-oss  cmd  安装

npm i  --save ali-oss

2.创建文件

tools.js

let OSS = require('ali-oss')
 
let client = new OSS({
  region: 'oss-cn-shenzhen',    //创建的时候，bucket所在的区域
  accessKeyId: 'LTA***************',// 阿里云控制台创建的AccessKey
  accessKeySecret: '0L************', //阿里云控制台创建的AccessSecret
  bucket: '*********'  //创建的bucket的名称
})
 
export const put = async (ObjName, fileUrl) => {  
  try {    
    let result = await client.put(`${ObjName}`, fileUrl)    
    // ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称    
    return result  
  } catch (e) {    
   console.log(e)  
  }
}
 
// 上传成功之后，转换真实的地址
export const signatureUrl= async (ObjName) => {    
  try {        
    let result = await client.signatureUrl(`${ObjName}`)    
    return result  
  } catch (e) {    
    console.log(e)  
  }
}
 
export const getFileNameUUID = () => {  
  function rx() {    
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)  
  }  
  return `${+new Date()}_${rx()}${rx()}`
}

<template>
  <div>
      <el-upload 
        drag 
        ref="upload"
        action="#"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="beforeAvatarUpload"
        :file-list="fileList"
        :http-request="handleUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传PDF  JPEG JPG PNG文件</div>
      </el-upload>
  </div>
</template>

<script>

    import { put, signatureUrl, getFileNameUUID } from '@/api/fileOss/tools'
    export default {
        data() {
            return {
                headers: {}, //请求token
                data: {}, //上传时候携带的参数
                token: '', //上传时候的token
                canUploadType: [ //可上传的文件类型
                    'image/png',
                    'image/jpeg',
                    'application/pdf', //pdf
                ],
                fileList:[]
            };
        },
        mounted() {
            this.token = this.$route.query.token;
            this.headers.token = this.token
        },

        methods: {
            beforeAvatarUpload(file) {
                this.data.fileName = file.name
                const isCanUpload = (this.canUploadType.indexOf(file.type) >= 0);
                if (!isCanUpload) {
                    this.$message.error('不支持的文件类型 ! ! !');
                }
                return isCanUpload;
            },
            getFileName(name){
              return  name.substring(name.lastIndexOf("."));
            },
            handleUpload(option) {
              // 获取文件的后缀名
              // let objName = getFileNameUUID()
              var obj = option.file.name
              var index = obj.lastIndexOf(".");      
              obj = obj.substring(index,obj.length);
              // 生成的文件名，保留文件后缀名，进行拼接      
              let objName = getFileNameUUID() + this.getFileName(option.file.name)
              // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
              put(`flieName/${objName}`, option.file).then(putRes => {        
                console.log(putRes,'putRes')
                if(putRes.res.statusCode == 200) {
                      console.log('直传成功，写你的需要操作的业务逻辑')
                 }   
                // 上传成功之后，转换真实的地址
                signatureUrl(`flieName/${objName}`).then(signatureRes => {          
                    console.log(signatureRes)   
                      
                })
              })
            },
            submitUpload() {
              this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
              console.log(file, fileList);
            },
            handlePreview(file) {
              console.log(file);
            },
        },
    };
</script>

<style lang="scss" scoped>
</style>