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" //上面獲取的臨時(shí)授權(quán)的數(shù)據(jù)里的Credentials.SecurityToken
// 從STS服務(wù)獲取的臨時(shí)訪問密鑰(AccessKey ID和AccessKey Secret)。
// 從STS服務(wù)獲取臨時(shí)訪問憑證后,您可以通過臨時(shí)訪問密鑰和安全令牌生成OSSClient。
// 創(chuàng)建OSSClient實(shí)例。
// 第一個參數(shù)就是bucket的Endpoint,可以在對象儲存oss控制臺的bucket的概覽得到,例如http://oss-cn-beijing.aliyuncs.com
// 第二個參數(shù)就是上面獲取的臨時(shí)授權(quán)的數(shù)據(jù)里的Credentials.AccessKeyId
// 第三個參數(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)
}
// 填寫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中虛擬dom,無法實(shí)時(shí)更新的問題
今天小編就為大家分享一篇解決vue中虛擬dom,無法實(shí)時(shí)更新的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項(xiàng)目debugger調(diào)試看不到源碼的問題及解決
這篇文章主要介紹了vue項(xiàng)目debugger調(diào)試看不到源碼的問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時(shí),?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3中update:modelValue的使用與不生效問題解決
現(xiàn)在vue3的使用越來越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下2022-03-03
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù),在子組件上顯示不出來,本文給大家分享兩種解決方案幫助大家解決這個問題,需要的朋友可以參考下2023-08-08

