快捷導(dǎo)航

vue3?TS?vite?element?ali-oss使用教程示例

更新時(shí)間：2023年07月31日 14:08:15 作者：金色秋風(fēng)

這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

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$/
      })
 ]

因?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名稱(chēng)，例如examplebucket。
    bucketName := "examplebucket"
    // 填寫(xiě)Object的完整路徑，完整路徑中不能包含Bucket名稱(chēng)，例如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)文章！

您可能感興趣的文章: