for_client/src/components/plugins/table-form/hc-form-upload.vue

<template>
    <div class="upload-container">
        <el-upload
            v-loading="isLoading"
            drag
            :accept="accept" 
            :action="action" 
            :class="isFocus ? 'is-focus' : ''"
            :disabled="isLoading" 
            :headers="getHeader()" 
            :keyname="isKeyName"
            :on-error="formUploadError"
            :on-progress="uploadprogress" 
            :placeholder="placeholder" 
            :show-file-list="false"
            class="hc-upload-table-form"
            element-loading-text="上传中..." 
            @exceed="formUploadExceed" 
            @success="formUploadSuccess"
        >
            <img v-if="isSrc" :src="isSrc" alt="" class="hc-table-form-img">
            <div v-else class="hc-table-form-icon">
                点此选择或者拖拽文件并上传
            </div>
            <div v-if="isSrc" class="hc-table-form-actions">
                <el-button plain type="primary" size="small" @click.stop="handlePreview">
                    预览
                </el-button>
                <el-button plain type="danger" size="small" @click.stop="delTableFormFile">
                    删除
                </el-button>
            </div>
            <input 
                :id="isKeyName" 
                v-model="isSrc" 
                class="hc-upload-input-src" 
                @blur="handleBlur" 
                @focus="handleFocus"
            >
        </el-upload>

        <!-- 预览弹窗 -->
        <el-dialog 
            v-model="previewVisible" 
            title="图片预览" 
            :width="dialogWidth"
            :before-close="handleClose"
        >
            <div class="preview-container">
                <div 
                    class="preview-image-wrapper"
                    :style="{ transform: `rotate(${rotation}deg)` }"
                >
                    <img 
                        :src="previewSrc" 
                        alt="预览图片" 
                        class="preview-image"
                        :style="{ maxHeight: `calc(100vh - 200px)` }"
                    >
                </div>
                <div class="rotation-controls">
                    <el-button type="primary" plain @click="rotate(-90)">向左旋转</el-button>
                    <el-button type="primary" plain @click="rotate(90)">向右旋转</el-button>
                </div>
            </div>
            <template #footer>
                <el-button @click="previewVisible = false">取消</el-button>
                <el-button 
                    type="primary" 
                    :loading="confirmLoading"
                    @click="confirmRotation"
                >
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getHeader } from 'hc-vue3-ui'
import { ElMessage } from 'element-plus'

const props = defineProps({
    src: {
        type: [Number, String],
        default: '',
    },
    keyname: {
        type: [Number, String],
        default: '',
    },
    placeholder: {
        type: [Number, String],
        default: '相片',
    },
    // 新增pkeyId属性，用于接口参数
    pkeyId: {
        type: [Number, String],
        default: '',
    },
})

// 事件
const emit = defineEmits(['success', 'del', 'rotate-success'])

// 变量
const isLoading = ref(false)
const isSrc = ref(props.src)
const isKeyName = ref(props.keyname)
const confirmLoading = ref(false)

// 预览相关变量
const previewVisible = ref(false)
const previewSrc = ref('')
const rotation = ref(0)
const dialogWidth = ref('80%')
const rotatedBlob = ref(null)

const action = '/api/blade-manager/exceltab/add-buss-imginfo'
const accept = 'image/png,image/jpg,image/jpeg'

// 监听props变化
watch(() => [props.src, props.keyname, props.pkeyId], 
([src, keyname]) => {
    isSrc.value = src
    isKeyName.value = keyname
})

// 上传进度
const uploadprogress = () => {
    isLoading.value = true
}

// 上传完成
const formUploadSuccess = (res) => {
    isLoading.value = false
    if (res.code === 200) {
        const link = res.data?.link || ''
        
        emit('success', {
            res,
            src: link,
            key: isKeyName.value,
        })
    }
}

// 上传失败
const formUploadError = () => {
    isLoading.value = false
    ElMessage.error('上传失败，请重试')
}

// 格式错误
const formUploadExceed = () => {
    isLoading.value = false
    ElMessage.error('只能上传一个文件')
}

// 删除上传的文件
const delTableFormFile = () => {
    emit('del', isKeyName.value)
}

// 焦点状态管理
const isFocus = ref(false)
const handleFocus = () => {
 isFocus.value = true 
}
const handleBlur = () => {
 isFocus.value = false 
}

// 预览图片
const handlePreview = () => {
    if (!isSrc.value) return
    previewSrc.value = isSrc.value
    rotation.value = 0
    previewVisible.value = true
}

// 关闭预览弹窗
const handleClose = () => {
    previewVisible.value = false
    rotation.value = 0
    rotatedBlob.value = null
}

// 旋转图片
const rotate = (degrees) => {
    rotation.value = (rotation.value + degrees) % 360
}

// 确认旋转并上传
const confirmRotation = async () => {
    if (rotation.value % 360 === 0) {
        previewVisible.value = false
        return
    }

    confirmLoading.value = true
    try {
        // 将旋转后的图片转换为blob
        const blob = await rotateImageAndGetBlob(previewSrc.value, rotation.value)
        if (!blob) {
            throw new Error('图片处理失败')
        }

        // 构建FormData
        const formData = new FormData()
        formData.append('file', blob, `rotated-${Date.now()}.png`)
        // 添加新参数
        formData.append('pkeyId', props.pkeyId)
        formData.append('keyname', isKeyName.value)

        // 调用上传接口
        const response = await fetch(action, {
            method: 'POST',
            headers: getHeader(),
            body: formData,
        })

        const res = await response.json()
        
        if (res.code === 200) {
            const link = res.data?.link || ''
            isSrc.value = link
            emit('success', {
                res,
                src: link,
                key: isKeyName.value,
            })
            emit('rotate-success', {
                src: link,
                rotation: rotation.value,
                key: isKeyName.value,
            })
            ElMessage.success(res.msg)
            previewVisible.value = false
        } else {
            throw new Error(res.msg || '上传失败')
        }
    } catch (error) {
        ElMessage.error(error.message || '处理失败，请重试')
    } finally {
        confirmLoading.value = false
    }
}

// 旋转图片并转为Blob
const rotateImageAndGetBlob = (imageUrl, degrees) => {
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            
            // 根据旋转角度设置画布尺寸
            const radians = (degrees * Math.PI) / 180
            let width = img.width
            let height = img.height
            
            if (degrees % 180 !== 0) {
                [width, height] = [height, width]
            }
            
            canvas.width = width
            canvas.height = height
            
            // 旋转画布
            ctx.translate(width / 2, height / 2)
            ctx.rotate(radians)
            ctx.drawImage(img, -img.width / 2, -img.height / 2)
            
            // 转换为Blob
            canvas.toBlob(blob => {
                if (blob) {
                    resolve(blob)
                } else {
                    reject(new Error('无法转换图片为Blob'))
                }
            }, 'image/png')
        }
        img.onerror = () => reject(new Error('图片加载失败'))
        img.src = imageUrl
    })
}
</script>

<style lang="scss" scoped>
.upload-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hc-upload-table-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border-radius: 3px;

    &.is-focus, &:hover {
        background-color: #eddac4;
        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
    }
    
    .hc-upload-input-src {
        position: absolute;
        z-index: -1;
        right: 10px;
        width: 10px;
    }

    .hc-table-form-img {
        max-width: 100%;
        max-height: 200px;
        object-fit: contain;
        margin-bottom: 10px;
    }
}

.hc-table-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.hc-table-form-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
}

.preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-image-wrapper {
    transition: transform 0.3s ease;
    margin: 20px 0;
}

.preview-image {
    max-width: 100%;
    object-fit: contain;
}

.rotation-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
</style>

<style lang="scss">
.hc-upload-table-form{
    border-radius: 3px;
    transition: box-shadow 0.3s, background-color 0.3s;
    
    &.is-focus, &:hover {
        background-color: #eddac4;
        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
    }
    
    .el-upload-dragger{
        height:100%;
        width: 100%;
        background-color: transparent;
        padding: 10px;
        text-align: left;
        border:none;
    }
}
</style>