基于Vue和ElementUI上传文件到阿里云OSS对象存储中
Posted lovoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Vue和ElementUI上传文件到阿里云OSS对象存储中相关的知识，希望对你有一定的参考价值。
前言
OSS（Open Storage Service）开放云存储服务，是阿里云对外的提供的海量，安全和高可靠的云存储服务。目前阿里的所有云服务都是收费，大家可以到官网上了解：http://www.aliyun.com/product/oss
OSS，通俗一点理解就像是一块硬盘用来存储东西呢，只不过，它是由很多服务器，通过类似负载均衡，raid等各种技术，搭建起来的云存储，类似我们经常使用的百度云盘，360云盘等。我们可以将我们服务，数据存放上去，方便，安全，实现云。好了，简单来说，OSS，既然是存储东西用的，我们就需要学会像类似IO流对电脑硬盘操作一样，学习一下对OSS云存储的上传，删除等操作。
首先是开通OSS服务器后，会有endpoint，跟地址；accessKeyId，类似用户名；accessKeySecret,类似密码；buketName:第一层文件夹的名字，一个用户可以创建十个bucketName,类似于我们的C,D,E,F盘符；accessUrl,很明显用户可以通过浏览器访问的地址。例如我们上传一个html文件，我们就可以通过"accessUrl/bucketName/目录/文件名.html，来进行访问。我在这里负责一个是页面静态化的功能，将动态的JSP页面生成静态的html页面，然后上传的OSS服务器，返回地址，让用户直接访问静态页面，这样就大大加快访问的速度。 这里突然想到一点不沾边的话语“物极必反，否极泰来”，最开始是单纯的静态页面，我们一直追求动态页面，现在又需要转会到静态页面，各有各的好处，所以技术这东西，没有一个好与不好，只是针对方面不同而已了。
一、配置OSS
1、首先要开通阿里云对象存储功能
请参照官网说明 https://help.aliyun.com/document_detail/31884.html
2、创建Bucker
3、创建用户
4、设置跨域：
操作步骤
- 进入 OSS 管理控制台 界面。
- 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
- 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。
- 单击 创建规则，打开 设定跨域规则 对话框。
- 设置跨域规则。
二、使用Vue构建上传页面
1、构建项目，添加如下三个文件
2、单文件上传singleUpload.vue内容
<template>
<div>
<el-upload
action="http://**.oss-cn-beijing.aliyuncs.com"
:data="dataObj"
list-type="picture"
:multiple="false" :show-file-list="showFileList"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="fileList[0].url" alt="">
</el-dialog>
</div>
</template>
<script>
import {policy} from './policy'
import { getUUID } from '@/utils'
export default {
name: 'singleUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf("/") + 1);
} else {
return null;
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function () {
return this.value !== null && this.value !== ''&& this.value!==undefined;
},
set: function (newValue) {
}
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: '',
// callback:'',
},
dialogVisible: false
};
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('');
},
handlePreview(file) {
this.dialogVisible = true;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy().then(response => {
console.log("响应的数据",response);
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir +getUUID()+'_${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
console.log("响应的数据222。。。",_self.dataObj);
resolve(true)
}).catch(err => {
reject(false)
})
})
},
handleUploadSuccess(res, file) {
console.log("上传成功...")
this.showFileList = true;
this.fileList.pop();
this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
this.emitInput(this.fileList[0].url);
}
}
}
</script>
<style>
</style>
3、发送请求函数policy.js
import http from '@/utils/httpRequest.js'
export function policy() {
return new Promise((resolve,reject)=>{
http({
url: http.adornUrl("/service/oss/policy"),
method: "get",
params: http.adornParams({})
}).then(({ data }) => {
resolve(data);
})
});
}
4、http请求httpRequest.js
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'
const http = axios.create({
timeout: 1000 * 30,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
/**
* 请求拦截
*/
http.interceptors.request.use(config => {
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
return config
}, error => {
return Promise.reject(error)
})
/**
* 响应拦截
*/
http.interceptors.response.use(response => {
if (response.data && response.data.code === 401) { // 401, token失效
clearLoginInfo()
router.push({ name: 'login' })
}
return response
}, error => {
return Promise.reject(error)
})
/**
* 请求地址处理
* @param {*} actionName action方法名称
*/
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + '/api' + actionName
}
/**
* get请求参数处理
* @param {*} params 参数对象
* @param {*} openDefultParams 是否开启默认参数?
*/
http.adornParams = (params = {}, openDefultParams = true) => {
var defaults = {
't': new Date().getTime()
}
return openDefultParams ? merge(defaults, params) : params
}
/**
* post请求数据处理
* @param {*} data 数据对象
* @param {*} openDefultdata 是否开启默认数据?
* @param {*} contentType 数据格式
* json: 'application/json; charset=utf-8'
* form: 'application/x-www-form-urlencoded; charset=utf-8'
*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = {
't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}
export default http
5、单文件上传singleUpload.vue组件使用
定义组件
使用组件
三、后台上传编写
1、引入阿里云oss支持
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>aliyun-oss-spring-boot-starter</artifactId>
</dependency>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>${spring-cloud.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-alibaba-dependencies</artifactId>
<version>2.2.5.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>aliyun-spring-boot-dependencies</artifactId>
<version>1.0.0</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
以上是关于基于Vue和ElementUI上传文件到阿里云OSS对象存储中的主要内容，如果未能解决你的问题，请参考以下文章
springboot+vue+elementui+阿里云oss上传文件
springboot+vue+elementui+阿里云oss上传文件
vue element-ui 上传图片到oss阿里云(第三方服务)
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇： 整合阿里云 OSS 服务 -- 上传下载文件图片