vue3 TS vite element ali-oss使用教程示例
作者:金色秋风
这篇文章主要为大家介绍了vue3 TS vite element ali-oss使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
vue3 TS vite element ali-oss使用方式
安装ali-oss包
npm i ali-oss -S
使用oss封装函数
const OSS = require('ali-oss') // import Oss from 'ali-oss' /** * [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。 * [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。 * [bucket] {String}:通过控制台或PutBucket创建的bucket。 * [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。 */ //Client.js export default function Client(data) { //后端提供数据 return new OSS({ region: 'oss-cn-beijing', //oss-cn-beijing-internal.aliyuncs.com accessKeyId: data.accessKeyId, accessKeySecret: data.accessKeySecret, stsToken: data.securityToken, bucket: data.bucket }) }
vite 默认不支持commonjs语法,所以使用require会报错。解决方案
安装vite-plugin-require-transform
npm i vite-plugin-require-transform --save-dev
配置vite.config.js
plugins: [ requireTransform({ fileRegex: /.ts$|.tsx$|.vue$|.js$/ }) ]
<div style='color:red;font-size:20px;'>再次注意<div>
因为阿里OSS文档的后台示例
package main import ( "fmt" "github.com/aliyun/aliyun-oss-go-sdk/oss" "os" ) func main() { // 从STS服务获取的安全令牌(SecurityToken)。 securitytoken := "yourSecurityToken" //上面获取的临时授权的数据里的Credentials.SecurityToken // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。 // 从STS服务获取临时访问凭证后,您可以通过临时访问密钥和安全令牌生成OSSClient。 // 创建OSSClient实例。 // 第一个参数就是bucket的Endpoint,可以在对象储存oss控制台的bucket的概览得到,例如http://oss-cn-beijing.aliyuncs.com // 第二个参数就是上面获取的临时授权的数据里的Credentials.AccessKeyId // 第三个参数就是上面获取的临时授权的数据里的Credentials.AccessKeySecret client, err := oss.New("yourEndpoint", "yourAccessKeyId", "yourAccessKeySecret", oss.SecurityToken(securitytoken)) if err != nil { fmt.Println("Error:", err) os.Exit(-1) } // 填写Bucket名称,例如examplebucket。 bucketName := "examplebucket" // 填写Object的完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。 objectName := "exampledir/exampleobject.txt" // 填写本地文件的完整路径,例如D:\\localpath\\examplefile.txt。 filepath := "D:\\localpath\\examplefile.txt" bucket,err := client.Bucket(bucketName) // 通过STS授权第三方上传文件。 err = bucket.PutObjectFromFile(objectName,filepath) fmt.Println(err) }
所以后台返回token的名字是securitytoken,而ali-OSS的示例名叫stsToken,记住自己对应上,安装我的示例写
element-plus代码
<template> <el-upload accept="" v-model:file-list="fileList" :http-request="handleUpload" :before-upload="beforeUpload" action="" list-type="picture-card" :auto-upload="true" > <slot name="default" class="el-icon-plus" /> </el-upload> </<template> <script lang="ts" setup> //Client.js 这里引入刚才封装好的Client函数 import Client from './ali-oss.js' import { ref } from 'vue' import type { UploadUserFile } from 'element-plus' const fileList = ref<UploadUserFile[]>([]) const handleUpload = async (option: Object) => { console.log(option) } // 这里是接口,会返回 import { OssAuthorize } from '@/utils/publicData' function beforeUpload(file: any) { console.log(file) OssAuthorize().then((response) => { // response.data.accessKeyId = response.data.accessKeyId.replace('STS.', '') const client = Client(response.data) client.multipartUpload(file.name, file).then((res: any) => { console.log(res) }) }) } </script>
上传成功后会返回的数据里requestUrls
这个是个数组 里面放的是图片链接
以上就是vue3 TS vite element ali-oss使用教程示例的详细内容,更多关于vue3 TS vite element ali-oss的资料请关注脚本之家其它相关文章!