vue+elementUI实现阿里云OSS存储

对象存储 OSS

直接上代码

新建文件  
aliyun.oss.client.js
/**
 * 阿里云oss上传工具
 */
let OSS = require('ali-oss');
let config = {
    region: '你的Region  注意 这个只要 空间名 不要 http:// 和 .aliyunoss.com !!',
    secure:true,
    accessKeyId: '你的AccessKeyId',
    accessKeySecret: '你的AccessKeySecret',
    bucket: '你的Bucket'
};

/** 
 * 配置
 */
let init = ()=>{
    return new OSS(config);
}

/** 
 * 生成uuid
 */
let guid = ()=>{
    let S4 = ()=>{
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

/** 
 * 修改文件名字
 */
let fileName = (file)=>{
    let arr = file.name.split(".");
    var uuid = "oss"+guid();
    if(arr.length>1){
        return uuid+'.'+arr[arr.length-1];
    }else{
        return uuid;
    }
}

/**
 * 上传文件
 */
let ossPut = (file)=>{
    return new Promise((resolve, reject) => {
        let objectName = fileName(file);
        init().put(objectName, file).then(({res,url}) => {
            if (res && res.status == 200) {
                console.log('阿里云OSS上传文件成功回调', res,url);
                resolve(res,url);
            }
        }).catch((err) => {
            console.log('阿里云OSS上传文件失败回调', err);
            reject(err)
        });
    })
}

/**
 * 下载文件
 */
let ossGet = (name)=>{
    return new Promise((resolve, reject) => {
        init().get(name).then(({res}) => {
            if (res && res.status == 200) {
                console.log('阿里云OSS下载文件成功回调', res);
                resolve(res);
            }
        }).catch((err) => {
            console.log('阿里云OSS下载文件失败回调', err);
            reject(err)
        });
    })
}

export default {ossPut,ossGet}

在main.js中引用
import ossClient from './utils/aliyun.oss.client';
Vue.prototype.$ossClient = ossClient;

在代码中调用

     选择文件

methods:{
    /**
     * 阿里云OSS上传
     */
    uploadHttp({ file }) {
        this.$ossClient.ossPut(file).then(res=>{

        })
    },
},