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}:通過(guò)阿里云控制臺(tái)創(chuàng)建的AccessKey。 * [accessKeySecret] {String}:通過(guò)阿里云控制臺(tái)創(chuàng)建的AccessSecret。 * [bucket] {String}:通過(guò)控制臺(tái)或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語(yǔ)法,所以使用require會(huì)報(bào)錯(cuò)。解決方案
安裝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文檔的后臺(tái)示例
package main import ( "fmt" "github.com/aliyun/aliyun-oss-go-sdk/oss" "os" ) func main() { // 從STS服務(wù)獲取的安全令牌(SecurityToken)。 securitytoken := "yourSecurityToken" //上面獲取的臨時(shí)授權(quán)的數(shù)據(jù)里的Credentials.SecurityToken // 從STS服務(wù)獲取的臨時(shí)訪問(wèn)密鑰(AccessKey ID和AccessKey Secret)。 // 從STS服務(wù)獲取臨時(shí)訪問(wèn)憑證后,您可以通過(guò)臨時(shí)訪問(wèn)密鑰和安全令牌生成OSSClient。 // 創(chuàng)建OSSClient實(shí)例。 // 第一個(gè)參數(shù)就是bucket的Endpoint,可以在對(duì)象儲(chǔ)存oss控制臺(tái)的bucket的概覽得到,例如http://oss-cn-beijing.aliyuncs.com // 第二個(gè)參數(shù)就是上面獲取的臨時(shí)授權(quán)的數(shù)據(jù)里的Credentials.AccessKeyId // 第三個(gè)參數(shù)就是上面獲取的臨時(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) } // 填寫(xiě)B(tài)ucket名稱,例如examplebucket。 bucketName := "examplebucket" // 填寫(xiě)Object的完整路徑,完整路徑中不能包含Bucket名稱,例如exampledir/exampleobject.txt。 objectName := "exampledir/exampleobject.txt" // 填寫(xiě)本地文件的完整路徑,例如D:\\localpath\\examplefile.txt。 filepath := "D:\\localpath\\examplefile.txt" bucket,err := client.Bucket(bucketName) // 通過(guò)STS授權(quán)第三方上傳文件。 err = bucket.PutObjectFromFile(objectName,filepath) fmt.Println(err) }
所以后臺(tái)返回token的名字是securitytoken,而ali-OSS的示例名叫stsToken,記住自己對(duì)應(yīng)上,安裝我的示例寫(xiě)
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) } // 這里是接口,會(huì)返回 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>
上傳成功后會(huì)返回的數(shù)據(jù)里requestUrls
這個(gè)是個(gè)數(shù)組 里面放的是圖片鏈接
以上就是vue3 TS vite element ali-oss使用教程示例的詳細(xì)內(nèi)容,更多關(guān)于vue3 TS vite element ali-oss的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決vue中虛擬dom,無(wú)法實(shí)時(shí)更新的問(wèn)題
今天小編就為大家分享一篇解決vue中虛擬dom,無(wú)法實(shí)時(shí)更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue項(xiàng)目debugger調(diào)試看不到源碼的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目debugger調(diào)試看不到源碼的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06解決vue項(xiàng)目router切換太慢問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目router切換太慢問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue3中update:modelValue的使用與不生效問(wèn)題解決
現(xiàn)在vue3的使用越來(lái)越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問(wèn)題的解決方法,需要的朋友可以參考下2022-03-03vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來(lái)的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù),在子組件上顯示不出來(lái),本文給大家分享兩種解決方案幫助大家解決這個(gè)問(wèn)題,需要的朋友可以參考下2023-08-08Vue3在Setup中使用axios請(qǐng)求獲取的值方式
這篇文章主要介紹了Vue3在Setup中使用axios請(qǐng)求獲取的值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06