vue+element ui 上传图片到阿里云公共配置

1. 需要先安装阿里云的上传库:

npm install ali-oss

2.前端上传代码

• 阿里云oss上传工具
  */
  let OSS = require(‘ali-oss’);
  let config = {
  region: ‘’,
  secure:true,
  accessKeyId: ‘’,
  accessKeySecret: ‘’,
  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,folderName)=>{
  return new Promise((resolve, reject) => {
  let objectName = fileName(file);
  var date = new Date();
  let year = date.getFullYear() //年
  let month = date.getMonth()+1 //月
  let dates = year +’/’+ month +’/’+date.getDate()
  let stroeAs = folderName + ‘/’ + dates + ‘/’ + objectName;
  init().put(stroeAs, 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}
注意 有可能会因为阿里云没配置对 会出现跨域的问题