vue3?TS?vite?element?ali-oss使用教程示例
vue3 TS vite element ali-oss使用方式
安裝ali-oss包
npm i ali-oss -S
使用oss封裝函數(shù)
const OSS = require('ali-oss') // import Oss from 'ali-oss' /** * [accessKeyId] {String}:通過阿里云控制臺創(chuàng)建的AccessKey。 * [accessKeySecret] {String}:通過阿里云控制臺創(chuàng)建的AccessSecret。 * [bucket] {String}:通過控制臺或PutBucket創(chuàng)建的bucket。 * [region] {String}:bucket所在的區(qū)域, 默認(rèn)oss-cn-hangzhou。 */ //Client.js export default function Client(data) { //后端提供數(shù)據(jù) 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 默認(rèn)不支持commonjs語法,所以使用require會報(bào)錯。解決方案
安裝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>
因?yàn)榘⒗颫SS文檔的后臺示例
package main import ( "fmt" "github.com/aliyun/aliyun-oss-go-sdk/oss" "os" ) func main() { // 從STS服務(wù)獲取的安全令牌(SecurityToken)。 securitytoken := "yourSecurityToken" //上面獲取的臨時授權(quán)的數(shù)據(jù)里的Credentials.SecurityToken // 從STS服務(wù)獲取的臨時訪問密鑰(AccessKey ID和AccessKey Secret)。 // 從STS服務(wù)獲取臨時訪問憑證后,您可以通過臨時訪問密鑰和安全令牌生成OSSClient。 // 創(chuàng)建OSSClient實(shí)例。 // 第一個參數(shù)就是bucket的Endpoint,可以在對象儲存oss控制臺的bucket的概覽得到,例如http://oss-cn-beijing.aliyuncs.com // 第二個參數(shù)就是上面獲取的臨時授權(quán)的數(shù)據(jù)里的Credentials.AccessKeyId // 第三個參數(shù)就是上面獲取的臨時授權(quán)的數(shù)據(jù)里的Credentials.AccessKeySecret client, err := oss.New("yourEndpoint", "yourAccessKeyId", "yourAccessKeySecret", oss.SecurityToken(securitytoken)) if err != nil { fmt.Println("Error:", err) os.Exit(-1) } // 填寫B(tài)ucket名稱,例如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授權(quán)第三方上傳文件。 err = bucket.PutObjectFromFile(objectName,filepath) fmt.Println(err) }
所以后臺返回token的名字是securitytoken,而ali-OSS的示例名叫stsToken,記住自己對應(yīng)上,安裝我的示例寫
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函數(shù) 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>
上傳成功后會返回的數(shù)據(jù)里requestUrls
這個是個數(shù)組 里面放的是圖片鏈接
以上就是vue3 TS vite element ali-oss使用教程示例的詳細(xì)內(nèi)容,更多關(guān)于vue3 TS vite element ali-oss的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue項(xiàng)目debugger調(diào)試看不到源碼的問題及解決
這篇文章主要介紹了vue項(xiàng)目debugger調(diào)試看不到源碼的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06vue3中update:modelValue的使用與不生效問題解決
現(xiàn)在vue3的使用越來越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下2022-03-03vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù),在子組件上顯示不出來,本文給大家分享兩種解決方案幫助大家解決這個問題,需要的朋友可以參考下2023-08-08