对象存储 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;
在代码中调用
<el-upload
action=""
:drag="true"
:multiple="true"
:http-request="uploadHttp"
>
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
methods:{
/**
* 阿里云OSS上传
*/
uploadHttp({ file }) {
this.$ossClient.ossPut(file).then(res=>{
})
},
},