大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
为什么使用对象存储OSS
很多企业的文件上传下载都是通过文件流的形式进行上传下载的,需要后端配合,对服务器压力很大,而且高消费,对公司损失太大,我们选择使用oss将尽可能地缩小成本,以及对网站及逆行大幅度提升
使用对象存储OSS改变了什么
- 网站数据动静分离,大幅提升网页性能
- 单独的文件管理界面,管理网站文件和本地电脑一样高效率方便使用
- 成本低,资源弹性伸缩,按需付费
什么是对象存储OSS
阿里云对象存储OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。多种存储类型供选择,全面优化存储成本。
在项目中使用
-
安装 ali-oss第三方库
npm install ali-oss --save or yarn add ali-oss
-
在项目中新建一个oss.js文件(用于放置我们的配置项)
import OSS from 'ali-oss' // or // const OSS = require('ali-oss') export const client = new OSS({ region: 'oss-cn-hangzhou', // oss地址 accessKeyId: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey ID。 accessKeySecret: 'xxxxxxxxxxx', // 通过阿里云控制台创建的AccessKey Secret。 bucket: 'xxxxxxxxxxx', // 仓库名字 useFetch: true, // 支持上传大于100KB的文件 secure:true // 返回的url为https }) export const headers = { // 指定该Object被下载时网页的缓存行为。 "Cache-Control": "no-cache", // 指定该Object被下载时的名称。 "Content-Disposition": "inline", // 指定该Object被下载时的内容编码格式。 "Content-Encoding": "UTF-8", // 指定过期时间。 Expires: "Wed, 08 Jul 2023 16:57:01 GMT", // 指定Object的存储类型。 "x-oss-storage-class": "Standard", // 指定Object的访问权限。 // "x-oss-object-acl": "private", // 设置Object的标签,可同时设置多个标签。 "x-oss-tagging": "Tag1=1&Tag2=2", // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true,表示禁止覆盖同名Object。 "x-oss-forbid-overwrite": "true", // "secure": "true" };
-
在组件中使用
<template> <div class="upload"> <el-upload ref="upload" style="display: inline-block;" action="" :limit="1" :http-request="httpRequest" :on-remove="handleRemove" :on-change="onChange" :before-upload="beforeAvatarUpload" :on-success="handleUploadSuccess" :file-list="fileList"> <el-button type="info" size="mini">点击上传</el-button> </el-upload> </div> </template> <script> export default { data(){ return { fileList: [], url: '' } }, methods: { onChange(file, fileList) { console.log(file, 'file', fileList, 'Filest'); this.fileList = fileList }, handleUploadSuccess(response, file, fileList) { console.log(response, file, fileList, 'response, file, fileList') }, handleRemove(e, fileList) { this.fileList = fileList; }, beforeAvatarUpload(file) { // 文件大小校验 const isLt2M = file.size / 1024 / 1024 < 10; if (!isLt2M) { this.$message.error('文件大小不能超过 10M !'); } return isLt2M; }, httpRequest(file) {//阿里云OSS上传 //判断扩展名 const tmpcnt = file.file.name.lastIndexOf(".") // 获取.的下标 const uploadFileName = file.file.name.substring(0, tmpcnt) // 获取文件名 console.log(uploadFileName, '文件名——uploadFileName'); const exname = file.file.name.substring(tmpcnt + 1) // 获取后缀名 console.log(exname, '后缀名'); const names = ['jpg', 'jpeg', 'webp', 'png', 'bmp', 'exe', 'yml'] if (names.indexOf(exname) < 0) { this.$message.error("不支持的格式!") return false } const fileName = uploadFileName console.log(fileName, '文件名'); client.put( fileName, file.file, { headers }, ).then(res => { console.log(res, 'res---header '); // this.handleUploadSuccess() // if (res.url) { // this.url.push(res.url) // } else { // this.$message.error('文件上传失败') // } }).catch(err => { console.log(err, 'err'); }) } } } </script>
-
上传成功,返回一个对象里边包含上传成功的url和上传的文件名
-
上传完毕
注意点:
- 本地上传oss是http,服务器是https的就会出现问题,需要在oss.js文件里边配置,配置完之后在上传一下,就能看到返回的url是https
secure:true // 返回的url为https
- 跨域之类的问题让运维配置下就可以了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170642.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...