vue3+天翼云oos上传封装

最新推荐文章于 2024-04-16 11:49:41 发布

宝塔镇河妖、

最新推荐文章于 2024-04-16 11:49:41 发布

阅读量596

点赞数 1

文章标签： vue.js javascript elementui 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_41397941/article/details/129112587

版权

引入sdk

在根目录下的index.html引入sdk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%- title %>
  </title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script src="<%= BASE_URL %>aws-sdk.min.js"></script>
</body>

</html>

目录结构

封装oos.js

let $oosUrl = '自己天翼云储存的域名';
//储存目录文件名处理
const urlName = function(directoryName, file) {
    const data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F",
        "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
        "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
        "s", "t", "u", "v", "w", "x", "y", "z"
    ];
    let nums = "";
    for (let i = 0; i < 5; i++) {
        const r = parseInt(Math.random() * 61, 10);
        nums += data[r];
    }
    var date = new Date();
    var sign2 = ":";
    var year = date.getFullYear() // 年
    var month = date.getMonth() + 1; // 月
    var day = date.getDate(); // 日
    var hour = date.getHours(); // 时
    var minutes = date.getMinutes(); // 分
    var seconds = date.getSeconds() //秒
    var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
    var week = weekArr[date.getDay()];
    var millisecond = date.getTime();
    // 给一位数的数据前面加 “0”
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
    }
    if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
    }
    if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
    }
    let suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
    let urlName = directoryName + '/' + year + '/' + month + '/' + day + '/' + year + month + day + hour + minutes +
        seconds + millisecond + nums + '.' + suffix;
    return urlName;
}



export const S3Demo = {
    //获取成功失败状态
    oosUrl: '',
    state: '',
    credentials: {
        accessKeyId: '',
        secretAccessKey: '',
        sessionToken: '', // 配置临时token
    },
    s3Client: null,
    // 初始化s3对象
    init: function(endpoint) {
        let config = {
            credentials: S3Demo.credentials,
            endpoint: 'https://' + endpoint
        };
        this.s3Client = new AWS.S3(config);
    },

    // 更新凭证
    updateCredentials: function(ak, sk, token) {
        this.credentials.accessKeyId = ak;
        this.credentials.secretAccessKey = sk;
        this.credentials.sessionToken = token;
    },
    //上传
    putObject(file, bucket, directoryName) {
        let key = urlName(directoryName, file);
        let params = {
            Bucket: bucket,
            Key: key,
            Body: file,
            ACL: "public-read", // 初始化acl权限，默认为private，"private"|"public-read"|"public-read-write"
        };
        return new Promise((resolve, reject) => {
            this.s3Client.putObject(params, function(err, data) {
                if (err) {
                    console.log("Error", err);
                    this.state = 'Error';
                    return 'Error'
                } else {
                    console.log("Success", data);
                    S3Demo.state = 'Success';
                    S3Demo.oosUrl = ''
                    resolve($oosUrl + key)
                }
            });
        })

    },
    //删除
    deleteObject(bucket, key) { //bucket储存同名称，key文件名
        var params = {
            Bucket: bucket,
            Key: key,
        };
        return new Promise((resolve, reject) => {
            this.s3Client.deleteObject(params, function(err, data) {
                if (err) {
                    console.log(err, err.stack);
                } else {
                    resolve(data)
                    console.log(data);
                }

            });
        })
    },
    //获取
    getObject(bucket, key) {
        var params = {
            Bucket: bucket,
            Key: key,
        };
        return new Promise((resolve, reject) => {
            this.s3Client.getObject(params, function(err, data) {
                if (err)
                    console.log(err, err.stack);
                else
                    console.log(data.Body.toString());
                resolve(data.Body.toString())
            });
        })
    }

}

使用

<template>
    <el-form>
        <el-form-item label="发票附件" prop="" label-width="180px">
              <el-upload 
                  ref="upload" 
                  class="upload-demo" 
                  action="#" 
                  :limit="1"
                  :on-exceed="handleExceed" 
                  :http-request="fnUploadRequest"
                  :before-upload="handleUpload" 
                  :auto-upload="true">
                      <template #trigger>
                          <el-button type="primary">选择文件</el-button>
                      </template>
                      <template #tip>
                          <div style="margin-left: 90px;margin-top: -30px;color: #E69F36">
                              说明：仅支持jpg、jpeg、bmp、png图片格式。图片大小不可超过5M
                          </div>
                      </template>
             </el-upload>
         </el-form-item>
    </el-form>
</template>
<script setup>
    import {
        onMounted,
        ref,
        reactive,
        inject
    } from 'vue'

    import OSS from 'ali-oss';
    // import { TabsPaneContext } from 'element-plus'
    import useStore from "@/pinia/index.js";
    import {
        S3Demo
    } from "@/utils/oos.js";
    import {
        ElMessage,
        ElMessageBox,
        ElNotification
    } from "element-plus";
    import {
        getOssSts
    } from "@/api/bill/auditBill.js";

    const fileUrl = ref(null);    

    //上传文件格式校验
    const handleUpload = (file, fileList) => {
        // console.log(file, fileList);
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'png' || testmsg === 'jpg' || testmsg === 'doc' || testmsg === 'docx' ||
            testmsg === 'ppt' || testmsg === 'pptx' || testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'rar' ||
            testmsg === 'zip' || testmsg === 'pdf';

        const isLimit10M = file.size / 1024 / 1024 < 5;
        var bool = false;
        if (extension && isLimit10M) {
            bool = true;
        } else {
            bool = false;
        }
        if (!extension) {
            ElNotification.error('请选择附件文件类型！');
            return bool;
        }
        if (!isLimit10M) {
            ElNotification.error('上传失败，不能超过5M！');
            return bool;
        }
        return bool;
    }
    const fnUploadRequest = async (options) => {
        try {
            console.log('111')
            console.log(options);

            let file = options.file; // 拿到 file
            //后端获取临时凭证等配置信息接口
            let config = await getOssSts();
            console.log(config)
            //更新临时token
            S3Demo.updateCredentials(config.data.data.accessKeyId, config.data.data.secretAccessKey, config.data
                .data.sessionToken)
            S3Demo.init(config.data.data.endpoint); //初始化
            let urlData = null;
            //上传
            let nununu = await S3Demo.putObject(file, config.data.data.bucketName, 'project').then(function(
                resolve) {
                console.log(resolve)
                fileUrl = resolve;
                ElMessage({
                    type: 'success',
                    message: '上传附件成功！',
                })
            })
        } catch (e) {
            console.log('222')
            ElNotification.error('上传附件失败！');
        }


    }
</script>