vue+element-ui+阿里云OSS 自动上传文件

1.安装阿里云OSS: npm install ali-oss --save
2.新建ali-oss.js文件

// 引入ali-oss
import {
  getJsonLocal
} from './common'

import axios from "axios";
import {
  baseUrl
} from "@/api/http.js";

let OSS = require('ali-oss')
let client
export let progress // 上传进度

function getAliToken() {
  const $aliToken = axios.create({
    withCredentials: true,
    headers: {
      "ACCESS-TOKEN": getJsonLocal("cmsToken") || "*",
    },
  });
// 后端的接口，用来获取临时凭证
  $aliToken.get(baseUrl + "/app/ali_ststoken").then((res) => {
    if (res.status == 200) {
      /**
       *  [accessKeyId] {String}：通过阿里云控制台创建的 或者 通过后端接口获取 AccessKey。
       *  [accessKeySecret] {String}：通过阿里云控制台创建的或者 通过后端接口获取AccessSecret。
       *  [bucket] {String}：通过控制台或PutBucket创建或者 通过后端接口获取bucket。
       *  [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
       */
      client = new OSS({
        region: 'oss-cn-shenzhen',
        secure: true, // secure: 配合region使用，如果指定了secure为true，则使用HTTPS访问
        accessKeyId: res.data.AccessKeyId,
        accessKeySecret: res.data.AccessKeySecret,
        stsToken: res.data.SecurityToken,
        bucket: 'cline'
      })

    } else {
      this.$message.error("获取阿里云临时token失败");
    }
  });
}
getAliToken()


/** 
 *  上传文件，大小不能超过5GB 
 * @param {string} ObjName OSS的储存路径和文件名字 
 * @param {string} fileUrl 本地文件 
 * @retruns Promise 
 */
  // ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称    
export const put = async (ObjName, fileUrl) => {
  try {
    let result = await client.multipartUpload(`${ObjName}`, fileUrl, {
      progress: function (p) {
        progress = p * 100
      }
    })
    return result
  } catch (e) {
    console.log(e)
  }
}
// 上传成功之后，转换真实的地址
// 后台只需要传入文件名，回显时候同样也只是返回文件名，说做数据迁移管理时候不麻烦，反正意思就是上传出现问题都和他们无关，so，没办法，所以需要自己根据返回文件名进行转码，生成所需要的url

export const signatureUrl = async (ObjName) => {
  try {
    let result = await client.signatureUrl(`${ObjName}`)
    return result
  } catch (e) {
    console.log(e)
  }
}

// 随机UUID
export const getFileNameUUID = () => {
  function rx() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return `${+new Date()}_${rx()}${rx()}`
}

3。在vue页面中，配合element-ui的upload组件的应用

<template>
 <el-upload
                  ref="upload"
                  action="fakeaction"
                  :http-request="uploadFunc" //用自定义上传方法
                  :limit="1"
                  :auto-upload="true"
                  :file-list="fileList"
                  :before-upload="beforeUploadFunc"
                  :on-change="onChange"
                  :on-remove="onRemove"
                >
</template>
<script>
import { put, signatureUrl, getFileNameUUID, progress } from "@/api/ali-oss";
data () {
return {
    fileList:[],
    fileName:' ', //文件名字
    progressNum:0 // 文件上传进度
  }
},
methods:{
   // 文件状态改变
    onChange(file, fileList) {
      if (file) {
        this.fileList = fileList.slice(-3);
      }
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFunc(file) {
      console.log(file)
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "zip") {
        this.$message.error("只能上传后缀是.zip的文件");
        return false;
      }
      if (size > 30) {
        this.$message.error("文件大小不得超过30M");
        return false;
      }
    },
// 删除文件
   onRemove(file, fileList) {
      this.fileList= [];
    },
  uploadFunc(param){
    let objName = getFileNameUUID();
      let obj = param.file.name;
      let index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      objName = getFileNameUUID() + param.file.name;
      put(`fileName/${objName}`, param.file).then((res) => {
        this.fileName = res.name;
        this.progressNum= progress;
      });
  }
}
</script>

最后编辑于：2020.10.29 11:19:59