qifei32
qifei32
  • 发布:2025-08-12 15:30
  • 更新:2025-08-14 13:45
  • 阅读:50

uni-file-picker手动上传文件,如何获取fileId和链接

分类:uniCloud

请问unicloud手动上传阿里云内置服务空间,如何获取fileId和链接?

2025-08-12 15:30 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

在success中呢?获取不到吗?

DCloud_云服务_LQ

DCloud_云服务_LQ

<template>  
    <view class="container">  
        <view class="upload-section">  
            <view class="title">图片上传</view>  

            <uni-file-picker ref="licenseRef" file-extname="png,jpg,jpeg" file-mediatype="image" :limit="1"  
                @select="licenseImgSelect" :auto-upload="false" :image-styles="imageStyles"></uni-file-picker>  

            <!-- 文件信息显示 -->  
            <view v-if="fileURL" class="file-info">  
                <view class="info-item">  
                    <text class="label">文件URL:</text>  
                    <text class="value">{{ fileURL }}</text>  
                </view>  
                <view class="copy-section">  
                    <button class="copy-btn" @click="copyURL">复制链接</button>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            fileURL: '',  
            imageStyles: {  
                width: 120,  
                height: 120,  
                border: {  
                    radius: '10px'  
                }  
            }  
        };  
    },  
    async mounted() {  

    },  
    methods: {  

        async licenseImgSelect(e) {  
            console.log('选择的文件:', JSON.stringify(e));  

            if (!e.tempFiles || e.tempFiles.length === 0) {  
                uni.showToast({  
                    title: '请选择文件',  
                    icon: 'none'  
                });  
                return;  
            }  
            const filePath = e.tempFilePaths[0];  
            let actualFilePath = filePath;  
            let fileName = 'image.jpg';  

            try {  
                // 生成云存储路径  
                const suffix = fileName.split('.').pop() || 'jpg';  
                const cloudPath = `private/${Date.now()}_${Math.random().toString(36).substr(2, 9)}.${suffix}`;  

                // 上传文件  
                const result = await uniCloud.uploadFile({  
                    filePath: actualFilePath,  
                    cloudPath,  
                    onUploadProgress: (progressEvent) => {  

                    }  
                });  
                console.log('上传结果:', JSON.stringify(result));  
                if (!result.fileID) {  
                    throw new Error('上传失败,未获取到文件ID');  
                }  

                // 获取临时访问URL  
                const tempFileURL = await this.getTempFileURL(result.fileID);  
                console.log('result.fileID:', result.fileID);  
                // 更新数据  
                this.fileURL = tempFileURL;  

                uni.showToast({  
                    title: '上传成功',  
                    icon: 'success'  
                });  

            } catch (error) {  
                console.error("上传图片出错:", error);  
                uni.showToast({  
                    title: '上传失败,请重试',  
                    icon: 'none'  
                });  
            } finally {  
                this.uploading = false;  
                this.progressPercent = 0;  
            }  
        },  

        async getTempFileURL(fileID) {  
            try {  
                const result = await uniCloud.getTempFileURL({  
                    fileList: [fileID]  
                });  

                if (result.fileList && result.fileList.length > 0) {  
                    return result.fileList[0].tempFileURL;  
                }  

                throw new Error('获取临时URL失败');  
            } catch (error) {  
                console.error('获取临时URL出错:', error);  
                throw error;  
            }  
        },  

        copyURL() {  
            if (!this.fileURL) {  
                uni.showToast({  
                    title: '没有可复制的URL',  
                    icon: 'none'  
                });  
                return;  
            }  

            uni.setClipboardData({  
                data: this.fileURL,  
                success: () => {  
                    uni.showToast({  
                        title: '链接已复制到剪贴板',  
                        icon: 'success'  
                    });  
                },  
                fail: (err) => {  
                    console.error('复制失败:', err);  
                    uni.showToast({  
                        title: '复制失败',  
                        icon: 'none'  
                    });  
                }  
            });  

        },  

    }  
};  
</script>  

<style scoped>  
.container {  
    padding: 40rpx;  
    background: #f5f5f5;  
    min-height: 100vh;  
}  

.title {  
    font-size: 36rpx;  
    font-weight: bold;  
    margin-bottom: 30rpx;  
    color: #333;  
}  

.upload-section {  
    background: white;  
    border-radius: 16rpx;  
    padding: 40rpx;  
    margin-bottom: 30rpx;  
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);  
}  

.progress {  
    margin: 30rpx 0;  
}  

.progress text {  
    display: block;  
    margin-bottom: 10rpx;  
    font-size: 28rpx;  
    color: #666;  
}  

.progress progress {  
    width: 100%;  
    height: 8rpx;  
    border-radius: 4rpx;  
}  

.file-info {  
    background: #f8f9fa;  
    border-radius: 12rpx;  
    padding: 20rpx;  
    margin-top: 20rpx;  
}  

.info-item {  
    display: flex;  
    margin-bottom: 20rpx;  
}  

.label {  
    font-size: 28rpx;  
    color: #666;  
    width: 160rpx;  
    font-weight: bold;  
}  

.value {  
    font-size: 28rpx;  
    color: #333;  
    flex: 1;  
    word-break: break-all;  
}  

.copy-section {  
    text-align: right;  
    margin-top: 20rpx;  
}  

.copy-btn {  
    background: #007aff;  
    color: white;  
    border: none;  
    border-radius: 8rpx;  
    padding: 15rpx 25rpx;  
    font-size: 26rpx;  
    cursor: pointer;  
    transition: background-color 0.3s;  
}  

.copy-btn:hover {  
    background: #0056cc;  
}  

.copy-btn:active {  
    background: #004085;  
}  
</style>
qifei32

qifei32 (作者)

解决了,非常感谢

要回复问题请先登录注册