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

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

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

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

这里主要是配置读写，只有设置成公共读写，才可以前端直接上传，不需要跟后端要什么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',// 阿里云控制台创建的AccessKeyaccessKeySecret: '123dwdw1e12e2e2d2fwefw', //阿里云控制台创建的AccessSecretbucket: '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文件中了）

<template><div id="app"><el-uploadclass="upload-demo"ref="upload"action="#":on-preview="handlePreview":on-remove="handleRemove":beforeUpload="beforeUpload":file-list="fileList":http-request="handleUpload":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div>
</template><script>import { put, signatureUrl, getFileNameUUID } from './tools'
export default {name: 'App',data(){return {fileList:[]}},methods: {getFileName(name){return  name.substring(name.lastIndexOf("."));//.txt},beforeUpload(file) {      // 限制上传类型      const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) ==='.pdf'      //限制的上限为20M      const max20M = file.size / 1024 / 1024 < 20;      if (!fileExtensions) {        this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式!');      }      if (!max20M) {        this.$message.error('上传文件大小不能超过 20MB!');      }      return fileExtensions && max20M;    },handleUpload(option) {// 获取文件的后缀名// let objName = getFileNameUUID()var obj = option.file.namevar index = obj.lastIndexOf(".");      obj = obj.substring(index,obj.length);// 生成的文件名，保留文件后缀名，进行拼接      let objName = getFileNameUUID() + this.getFileName(option.file.name)// 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义put(`flieName/${objName}`, option.file).then(res => {        console.log(res,'res')// 上传成功之后，转换真实的地址signatureUrl(`flieName/${objName}`).then(res => {          console.log(res)        })})},submitUpload() {this.$refs.upload.submit();},handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);}}}
</script><style>
#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;
}
</style>

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

按上图配置，八九不离十，直接成功！

二、跑起来之后，我老大跟我提了个需求就是，把阿里云里面现有的文件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].urlurls.push(url)}console.log(urls)
}list();

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

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

前端（react）上传到阿里云OSS存储实例
需求背景由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述安装原本 ...
一步步带你实现一个简单的express服务器，能让vue通过axios请求将图片上传到阿里云OSS
文章目录前言一.申请阿里云OSS 二.Vue前端读取图片三.将图片base64转成二进制文件四.搭建express服务器五.通过axios给服务器发送请求六.发送图片并上传阿里云我们首先 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在 ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
element-ui upload组件上传文件类型限制
element-ui upload组件上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...

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

一、安装 npm i --save ali-oss

（1）.在vue-clic中新建tools.js文件，（此文件主要是封装方法）

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

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

最新文章

热门文章