baozhida_erp/src/components/upImg/upimg.vue

<!-- 上传一张图片回显 -->
<template>
    <div class="">
        <div class="upImg">
            <div class="upImg-item" v-if="!imgData">
                <input class="upImg-item-input" type="file" :disabled="props.disabled" placeholder="选择图片" @change="changesFun" />
                <div class="upImg-item-icon"><el-icon>
                        <Plus />
                    </el-icon></div>
            </div>
            <div class="upImg-img" v-else @mouseenter="showModel = true" @mouseleave="showModel = false">
                <img :src="imgData" style="width: 100%;height: 100%;object-fit: cover;">
                <div class="upImg-img-model" v-if='showModel'>
                    <el-icon @click="clickShow" style="color: #fff;cursor: pointer;font-size: 18px;margin-right: 5px;"><View /></el-icon>
                    <el-icon @click="clickDel" v-if="!props.disabled" style="color: #fff;cursor: pointer;font-size: 16px;"><Delete /></el-icon>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" style="z-index: 10;" :append-to-body="true">
            <img w-full :src="imgData" style="width: 100%;height: auto;"/>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {ref } from 'vue';
import { UpFileToken } from '@/api/public/index'
import { GlobalStore } from '@/stores/index'
import { resolve } from 'path';
import * as qiniu from "qiniu-js";
import { ElMessage } from 'element-plus'


const props = defineProps({
    imgData: {
        type: String,
        default: () => '',
    },
    disabled:{
        type: Boolean,
        default: () => false,
    }
});

const uploadData = {
    token: '',
    key: ''
}
const globalStore = GlobalStore()
const showModel = ref(false)
const emits = defineEmits()
const files = ref()
const dialogVisible = ref(false)
const changesFun = async (e: any) => {
    files.value = e.target.files[0]
    await clickToken()//获取token
    uploadData.key = e.target.files[0].name || null
    QiniuYun()
    console.log('选择', e, uploadData)
}

//获取token Api
const clickToken = async () => {
    return new Promise((resolve: any) => {
        UpFileToken({ User_tokey: globalStore.GET_User_tokey }).then(res => {
            uploadData.token = res.Data as string
            resolve()
        })
    })

}

//函数
const QiniuYun = async () => {
    var config = {
        useCdnDomain: false, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
        region: qiniu.region.z2,
        domain: "https://up-z2.qiniup.com", //配置好的七牛云域名  如   https://cdn.qniyun.com/
        chunkSize: 1000, //每个分片的大小，单位mb，默认值3
        forceDirect: false //直传还是断点续传方式，true为直传
    };
    var putExtra: any = {
        fname: files.value.name, //文件原始文件名
        params: {},
        mimeType: [] || null
    };
    var observable = qiniu.upload(files.value, uploadData.key, uploadData.token, putExtra, config);
    //   设置实例的监听对象
    var observer = {
        next(res: any) {
            console.log('实例监听对象', res)
        },
        // 接收上传错误信息
        error(err: any) {
            switch (err.code) {
                case 413:
                    ElMessage.error('错了哦，图片可能太大了哦')
                    break
                case 408:
                    ElMessage.error('错了哦，请求超时')
                    break
                default:
                    ElMessage.error('错了哦，上传错误')
            }
        },
        // 接收上传完成后的信息
        complete(com: any) {
            let ERPOSS = import.meta.env.VITE_BZD_ERPOSS_APP_API
            emits('update:upImg',ERPOSS+com.key);
        }
    };
    observable.subscribe(observer);
}

//删除
const clickDel = async (e: any) => {
    emits('update:upImg', '');
}
//函数
const clickShow = async ()=>{
    dialogVisible.value = true
}
</script>
<style lang="scss">
/* @import url(); 引入css类 */
.upImg {
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;

    &-item:hover {
        border: 1px dashed var(--el-color-primary);
    }

    &-item {
        border: 1px dashed var(--el-border-color-darker);

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;

        &-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
            cursor: pointer;
        }

        &-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }

    &-img {
        width: 100%;
        height: 100%;
        position: relative;

        &-model {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(#000, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

}
</style>