vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

作者 : admin 本文共1870个字,预计阅读时间需要5分钟 发布时间: 2024-06-9 共5人阅读

因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快 

(能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过) 

vue前端直接使用element-ui的upload组件上传到阿里云OSS存储插图

在执行下面操作之前,你要确定你的阿里云能看到上边这个页面 

vue前端直接使用element-ui的upload组件上传到阿里云OSS存储插图(1)

 这里主要是配置读写,只有设置成公共读写,才可以前端直接上传,不需要跟后端要什么token了

一、安装 npm i  –save ali-oss

(1).在vue-clic中新建tools.js文件,(此文件主要是封装方法)

let OSS = require('ali-oss')

let client = new OSS({
  region: 'oss-cn-beijing',    //创建的时候,bucket所在的区域,华北2->oss-cn-beijing ;其他的可以去百度
  accessKeyId: 'wefwefwfwfwfwfwdwd2d32dw',// 阿里云控制台创建的AccessKey
  accessKeySecret: '123dwdw1e12e2e2d2fwefw', //阿里云控制台创建的AccessSecret
  bucket: 'xxxxx'  //创建的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()}`
}

(2)在.vue中写入一下代码,有注释,细心的话可以看懂(我只是演示,所以放到了app.vue文件中了)


  
    
      选取文件
      上传到服务器
      只能上传jpg/png文件,且不超过500kb
    
  





#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

(3)运行一下试试,咦,是不是报跨域问题了?没有恭喜你成功了,出现的小伙伴也不要着急,请看下图

vue前端直接使用element-ui的upload组件上传到阿里云OSS存储插图(2)

 按上图配置,八九不离十,直接成功!

二、跑起来之后,我老大跟我提了个需求就是,把阿里云里面现有的文件url整体的提取出来,于是乎,我便开始疯狂查阅文档,最终找到了这个基于nodejs的宝藏脚本,代码如下:

const OSS = require('ali-oss');


//这里的配置和上传的配置保持一致,毕竟只是为了查询当前阿里云已存的所有文件url
const client = new OSS({
  accessKeyId: 'wefhwuifhweifhwefhwiof',  
  accessKeySecret: 'wefhwfwefwfwefewgretg',
  bucket: 'wefwfw',
  region: 'oss-cn-beijing',
});

let urls = []
async function list () {
  // 不带任何参数,默认最多返回100个文件。
  const result = await client.list();
  // console.log(result.objects.url);
  for(let i = 0;i < result.objects.length ;i++){
    let url = result.objects[i].url
    urls.push(url)
  }
  console.log(urls)
}

list();

OK了,本篇文章的有价值信息就这些,不为别的,只为了记录自己的经历,不断学习,不断进步!

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » vue前端直接使用element-ui的upload组件上传到阿里云OSS存储
E-->