vue 文件上传至阿里云 ali-oss

2023-10-09 00:50
文章标签 阿里 vue oss 上传 ali

本文主要是介绍vue 文件上传至阿里云 ali-oss,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在之前的开发当中都是后台处理上传,前端负责上传接口调用,涉及到直传到阿里云对象存储服务(oss),查阅了相关资料,分享出来希望能帮助到遇到这个需求的小伙伴,下面是具体的步骤。

使用oss

1.使用 npm 安装ali-oss

npm install ali-oss --save

2.写一个公用的ali-oss.js

// 引入ali-oss
let OSS = require('ali-oss')/***  [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。*  [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。*  [bucket] {String}:通过控制台或PutBucket创建的bucket。*  [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。*/
let client = new OSS({region: '<oss region>',secure: true,  // secure: 配合region使用,如果指定了secure为true,则使用HTTPS访问  accessKeyId: '<Your accessKeyId>',accessKeySecret: '<Your accessKeySecret>',bucket: '<Your bucket name>'
})

官网方法示例点这里

3.调用

 

/** 
*  上传文件,大小不能超过5GB 
* @param {string} ObjName OSS的储存路径和文件名字 
* @param {string} fileUrl 本地文件 
* @retruns Promise 
*/
export const put = async (ObjName, fileUrl) => {  try {    let result = await client.put(`${ObjName}`, fileUrl)    // ObjName为文件名字,可以只写名字,就直接储存在 bucket 的根路径,如需放在文件夹下面直接在文件名前面加上文件夹名称    return result  } catch (e) {    console.log(e)  }
}
// 上传成功之后,转换真实的地址
// 后台只需要传入文件名,回显时候同样也只是返回文件名,说做数据迁移管理时候不麻烦,反正意思就是上传出现问题都和他们无关,so,没办法,所以需要自己根据返回文件名进行转码,生成所需要的urlexport const signatureUrl= async (ObjName) => {    try {    let result = await client.signatureUrl(`${ObjName}`)    return result  } catch (e) {    console.log(e)  }
}

4.保证上传文件的唯一性,随机生成文件名

/** 
* 生成随机文件名称 
* 规则八位随机字符,加下划线连接时间戳 
*/
export const getFileNameUUID = () => {  function rx() {    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)  }  return `${+new Date()}_${rx()}${rx()}`
}

使用element的 upload 组件进行上传

Element-UI的 Upload 组件有一个 http-request 配置,可以自定义上传方法,覆盖默认的。

<template><div class="hello"><el-uploadclass="upload-demo"action:http-request="handleUpload":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":before-remove="beforeRemove":before-upload="beforeUpload"multiple      :limit="limit":on-exceed="handleExceed":file-list="fileList":list-type="listType"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">{{ tip }}</div></el-upload></div>
</template><script>
import { put, signatureUrl, getFileNameUUID } from '@/utils/ali-oss'export default {name: 'Upload',props: {tip: {type: String,default: '上传大小不能超过80M'},limit: {type: Number,default: 1},action: {type: String,default: ''},headers: {type: Object,default: () => {}},name: {type: String,default: ''},listType: {type: String,default: 'text'}},data() {return {fileList: []}},methods: {handleRemove(file, fileList) {this.$emit('on-remove', file, fileList)},handlePreview(file) {this.$emit('on-preview', file)},handleExceed(files, fileList) {this.$message.warning(`每次只能上传 ${this.limit} 个文件`)},beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}?`)},handleSuccess(response, file, fileList) {this.fileList = fileListthis.$emit('on-success', file, fileList)},beforeUpload(file) {      // 限制上传类型      const fileExtensions = getFileName(file.name) === '.doc' || getFileName(file.name) === '.docx' || 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() + getFileName(option.file.name)// 调用 ali-oss 中的方法,flieName是存放的文件夹名称,可自己定义put(`flieName/${objName}`, option.file).then(res => {        console.log(res)// 上传成功之后,转换真实的地址signatureUrl(`flieName/${objName}`).then(res => {          console.log(res)        })})}}
}
</script>

上传到阿里云OSS成功后,会返回文件的地址,提交给后台保存地址就可以了。

 

如果遇到跨域问题,请参考官网的配置

oss跨域配置

 

这篇关于vue 文件上传至阿里云 ali-oss的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/169153

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Java文件上传的多种实现方式

《Java文件上传的多种实现方式》文章主要介绍了文件上传接收接口的使用方法,包括获取文件信息、创建文件夹、保存文件到本地的两种方法,以及如何使用Postman进行接口调用... 目录Java文件上传的多方式1.文件上传接收文件接口2.接口主要内容部分3.postman接口调用总结Java文件上传的多方式1

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template