当前位置：首页 > news >正文

vue中使用ali-oss上传文件到阿里云上

news 2025/7/20 7:17:02

1.使用 npm 安装ali-oss

npm install ali-oss --save

2.写ali-oss.js

// 引入ali-oss
let OSS = require('ali-oss')
let client = new OSS({region: 'oss-cn-xxx', // bucket所在的区域， 默认oss-cn-hangzhousecure: true, // secure: 配合region使用，如果指定了secure为true，则使用HTTPS访问accessKeyId: '', // 通过阿里云控制台创建的AccessKeyaccessKeySecret: '', // 通过阿里云控制台创建的AccessSecretbucket: 'xxxxx', // 通过控制台或PutBucket创建的bucket
})
export const put = async (ObjName, fileUrl) => {try {let result = await client.put(`${ObjName}`, fileUrl)// ObjName为文件名字,可以只写名字，就直接储存在 bucket 的根路径，如需放在文件夹下面直接在文件名前面加上文件夹名称return result} catch (e) {console.log(e)}
}

3.使用element ui的 upload 组件进行上传

<template><div><el-uploadclass="upload-demo"actiondrag:http-request="handleUploadOss":before-upload="beforeUploadOss"><i class="el-icon-upload"></i><div class="el-upload__text" v-loading="uploadLoading">将文件拖到此处，或<em>点击上传</em></div></el-upload></div>
</template>
<script>
import {put} from '@/utils/ali-oss'
export default {
data() {return {},methods: {beforeUploadOss(file) {// console.log(file)// 限制上传类型const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) ==='.pdf' || this.getFileName(file.name) ==='.xlsx' || this.getFileName(file.name) ==='.zip'//限制的上限为500Mbconst maxSize = file.size / 1024 / 1024 < 500;if (!fileExtensions) {this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式, .xlsx 格式, .zip 格式!');}if (!maxSize) {this.$message.error('上传文件大小不能超过 500MB!');}// return fileExtensions && max20M;return maxSize},getFileName(name){return name.substring(name.lastIndexOf('.'))},handleUploadOss(option) {let objName = option.file.namelet fileName = moment().format('YYYY/MM/DD')this.uploadLoading = trueput(`${fileName}/${objName}`, option.file).then(res => {console.log(res)if (res.res.statusCode === 200) {this.$message.success('上传成功')}else{this.$message.error('上传失败')}}).catch((err) => {})},} 
}}
</script>