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

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


<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>