vue 天翼云上传文件 vue2 跟vue3 的不同处理方式

vue2 的 处理步骤

1.npm i aws-sdk
2. 创建 aws.js 文件

import AWS from "aws-sdk";

// 配置AWS SDK
AWS.config.update({
  endpoint: "",
  region: "", // 替换为你的区域
  accessKeyId: "", // 替换为你的访问密钥
  ServiceURL: "",
  CannedACL: "PublicReadWrite",
  secretAccessKey: "", // 替换为你的密钥
  ACL: "public-read",
  // httpOptions: {
  //   timeout: 100000,
  // },
});

// 创建S3服务对象
const s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  CannedACL: "PublicReadWrite",
  params: { Bucket: "" }, // 替换为你的桶名
});

// 导出s3服务对象供其他文件使用
export default s3;

3.页面使用

import s3 from "@/utils/aws-sdk";

 async uploadfile(param) {
      let file = param.file;
      let that = this;
      try {
        const params = {
          Key: "resource/" + file.name, // 指定文件名
          Body: file, // 上传的文件对象
          ACL: "public-read",
        };
        const response = await s3.upload(params).promise();
        this.file.path = response.Location;
        this.file.accessUrl = response.Key;
        this.loading.close();
      } catch (error) {
        console.error("Error uploading file:", error);
      }
    },

文档地址 https://docs.aws.amazon.com/zh_cn/code-library/latest/ug/what-is-code-library.html

vue3 的处理步骤

1.pnpm i @aws-sdk/client-s3
2. 创建 aws.js 文件

import {
  S3Client
} from '@aws-sdk/client-s3';

var config = {
  credentials: {
    accessKeyId: '',
    secretAccessKey: '',
  },
  region: 'cn',
  endpoint: '',
};
const client = new S3Client(config);

export default client;

3.页面使用

  import {  PutObjectCommand } from '@aws-sdk/client-s3';

  import client from '@/utils/aws-sdk';

 const onUpload= async (currentFile: any) => {
    let fileObj = currentFile.fileItem;
    console.log(fileObj, '=currentFile');

    try {
      const params = {
        Key: 'resource/user_pic/' + fileObj.name, // 指定文件名
        Body: fileObj.file, // 上传的文件对象
        ACL: 'public-read',
        Bucket: '',
      };

      const data = await client.send(new PutObjectCommand(params));

      if (data.$metadata.httpStatusCode == 200) {
      
        file.value = {
          url:
           ‘1111111’
        };//自己拼接的上传成功的文件路径
      }
      console.log('Success', data);

      return data;
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  };

文档地址https://docs.aws.amazon.com/zh_cn/code-library/latest/ug/what-is-code-library.html