<template>
|
<view class="camera-upload">
|
<!-- 拍照/拍视频按钮 -->
|
<view v-if="!disabled"
|
class="camera-buttons">
|
<view class="button-row">
|
<u-button type="primary"
|
@click="takePhoto"
|
:loading="uploading"
|
:disabled="fileList.length >= limit"
|
:customStyle="{ marginRight: '10px', flex: 1 }">
|
<u-icon name="camera"
|
size="18"
|
color="#fff"
|
style="margin-right: 5px;"></u-icon>
|
{{ uploading ? '上传中...' : '拍照' }}
|
</u-button>
|
<!-- <u-button
|
type="success"
|
@click="takeVideo"
|
:loading="uploading"
|
:disabled="fileList.length >= limit"
|
:customStyle="{ flex: 1 }"
|
>
|
<u-icon name="video" size="18" color="#fff" style="margin-right: 5px;"></u-icon>
|
{{ uploading ? '上传中...' : '拍视频' }}
|
</u-button> -->
|
</view>
|
</view>
|
<!-- 提示信息 -->
|
<view v-if="showTip && !disabled"
|
class="upload-tip">
|
请使用相机
|
<text v-if="fileSize"
|
class="tip-text">
|
拍摄大小不超过 <text class="tip-highlight">{{ fileSize }}MB</text>
|
</text>
|
的
|
<text class="tip-highlight">照片</text>
|
</view>
|
<!-- 媒体文件列表 -->
|
<view class="media-list">
|
<view v-for="(file, index) in fileList"
|
:key="file.uid || index"
|
class="media-item">
|
<!-- 预览区域 -->
|
<view class="media-preview"
|
@click="previewMedia(file, index)">
|
<image v-if="file.type === 'image'"
|
:src="file.url || file.tempFilePath"
|
class="preview-image"
|
mode="aspectFill"></image>
|
<video v-else-if="file.type === 'video'"
|
:src="file.url || file.tempFilePath"
|
class="preview-video"
|
:controls="false"></video>
|
<view class="media-type-icon">
|
<u-icon :name="file.type === 'image' ? 'photo' : 'video'"
|
size="12"
|
color="#fff"></u-icon>
|
</view>
|
</view>
|
<!-- 操作按钮 -->
|
<view class="media-actions"
|
v-if="!disabled">
|
<u-button type="error"
|
size="mini"
|
@click="handleDelete(index)"
|
:customStyle="{
|
minWidth: '40px',
|
height: '24px',
|
fontSize: '10px',
|
padding: '0 8px'
|
}">
|
删除
|
</u-button>
|
</view>
|
</view>
|
</view>
|
<!-- 上传进度 -->
|
<view v-if="uploading"
|
class="upload-progress">
|
<u-line-progress :percentage="uploadProgress"
|
:showText="true"
|
activeColor="#409eff"></u-line-progress>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
|
import { getToken } from "@/utils/auth";
|
|
// Props 定义
|
const props = defineProps({
|
modelValue: [String, Object, Array],
|
action: { type: String, default: "/common/minioUploads" },
|
data: { type: Object },
|
limit: { type: Number, default: 5 },
|
fileSize: { type: Number, default: 10 }, // 默认10MB，适合视频
|
fileType: {
|
type: Array,
|
default: () => ["jpg", "jpeg", "png", "mp4", "mov"],
|
},
|
isShowTip: { type: Boolean, default: true },
|
disabled: { type: Boolean, default: false },
|
drag: { type: Boolean, default: false }, // 拍照不需要拖拽
|
statusType: { type: Number, default: "" }, // 用于区分不同状态的上传
|
maxVideoDuration: { type: Number, default: 30 }, // 最大视频时长（秒）
|
});
|
|
// 事件定义
|
const emit = defineEmits(["update:modelValue"]);
|
|
// 响应式数据
|
const number = ref(0);
|
const uploadList = ref([]);
|
const fileList = ref([]);
|
const uploading = ref(false);
|
const uploadProgress = ref(0);
|
|
// 计算属性
|
const uploadFileUrl = computed(() => {
|
// 获取基础API地址，适配uniapp环境
|
let baseUrl = "";
|
|
// 尝试多种方式获取baseUrl
|
if (process.env.VUE_APP_BASE_API) {
|
baseUrl = process.env.VUE_APP_BASE_API;
|
} else if (process.env.NODE_ENV === "development") {
|
baseUrl = "http://192.168.1.147:9036";
|
} else {
|
baseUrl = "http://192.168.1.147:9036";
|
}
|
|
const fullUrl = baseUrl + props.action;
|
return fullUrl;
|
});
|
const headers = computed(() => {
|
const token = getToken();
|
return token ? { Authorization: "Bearer " + token } : {};
|
});
|
const showTip = computed(
|
() => props.isShowTip && (props.fileType || props.fileSize)
|
);
|
// 初始化和编辑初始化方法
|
const init = () => {
|
fileList.value = [];
|
uploadList.value = [];
|
number.value = 0;
|
};
|
|
const editInit = val => {
|
fileList.value = [];
|
val.storageBlobDTO.forEach(element => {
|
// 确保文件数据包含所有必要字段，包括id
|
const fileData = {
|
...element,
|
id: element.id, // 保留服务器返回的id
|
url: element.url || element.downloadUrl,
|
bucketFilename: element.bucketFilename || element.name,
|
downloadUrl: element.downloadUrl || element.url,
|
type:
|
element.type ||
|
(element.url && element.url.includes("video") ? "video" : "image"),
|
name: element.name || element.bucketFilename || `文件_${Date.now()}`,
|
size: element.size || 0,
|
createTime: element.createTime || new Date().getTime(),
|
uid: element.uid || new Date().getTime() + Math.random(),
|
};
|
fileList.value.push(fileData);
|
uploadedSuccessfully();
|
});
|
};
|
|
// 测试服务器连接
|
const testServerConnection = () => {
|
return new Promise(resolve => {
|
uni.request({
|
url: uploadFileUrl.value.replace("/common/minioUploads", "/common/test"),
|
method: "GET",
|
timeout: 5000,
|
success: res => {
|
resolve(true);
|
},
|
fail: err => {
|
resolve(false);
|
},
|
});
|
});
|
};
|
|
// 组件销毁时的清理
|
onUnmounted(() => {
|
// 清理上传状态
|
if (uploading.value) {
|
uploading.value = false;
|
}
|
|
// 隐藏可能显示的加载提示
|
uni.hideLoading();
|
uni.hideToast();
|
});
|
|
// 暴露方法
|
defineExpose({ init, editInit, testServerConnection });
|
|
// 监听 modelValue 变化
|
watch(
|
() => props.modelValue,
|
val => {
|
if (val) {
|
let temp = 1;
|
let list = [];
|
|
if (Array.isArray(val)) {
|
list = val;
|
} else if (typeof val === "string") {
|
list = val.split(",").map(url => ({ url: url.trim() }));
|
}
|
|
fileList.value = list.map(item => {
|
if (typeof item === "string") {
|
item = { name: item, url: item };
|
}
|
// 确保每个文件都有必要的属性，包括id
|
return {
|
...item,
|
id: item.id, // 保留id字段
|
uid: item.uid || new Date().getTime() + temp++,
|
type:
|
item.type ||
|
(item.url && item.url.includes("video") ? "video" : "image"),
|
name: item.name || item.bucketFilename || `文件_${Date.now()}`,
|
size: item.size || 0,
|
createTime: item.createTime || new Date().getTime(),
|
};
|
});
|
} else {
|
fileList.value = [];
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 拍照
|
const takePhoto = () => {
|
if (fileList.value.length >= props.limit) {
|
uni.showToast({
|
title: `最多只能拍摄${props.limit}个文件`,
|
icon: "none",
|
});
|
return;
|
}
|
|
uni.chooseImage({
|
count: 1,
|
sizeType: ["compressed", "original"],
|
sourceType: ["camera"],
|
success: res => {
|
try {
|
if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
|
throw new Error("未获取到图片文件");
|
}
|
|
const tempFilePath = res.tempFilePaths[0];
|
const tempFile =
|
res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : {};
|
|
const file = {
|
tempFilePath: tempFilePath,
|
type: "image",
|
name: `photo_${Date.now()}.jpg`,
|
size: tempFile.size || 0,
|
createTime: new Date().getTime(),
|
uid: Date.now() + Math.random(),
|
};
|
|
handleBeforeUpload(file);
|
} catch (error) {
|
console.error("处理拍照结果失败:", error);
|
uni.showToast({
|
title: "处理图片失败",
|
icon: "error",
|
});
|
}
|
},
|
fail: err => {
|
console.error("拍照失败:", err);
|
uni.showToast({
|
title: "拍照失败: " + (err.errMsg || "未知错误"),
|
icon: "error",
|
});
|
},
|
});
|
};
|
|
// 拍视频
|
const takeVideo = () => {
|
if (fileList.value.length >= props.limit) {
|
uni.showToast({
|
title: `最多只能拍摄${props.limit}个文件`,
|
icon: "none",
|
});
|
return;
|
}
|
|
uni.chooseVideo({
|
sourceType: ["camera"],
|
maxDuration: props.maxVideoDuration,
|
camera: "back",
|
success: res => {
|
try {
|
if (!res.tempFilePath) {
|
throw new Error("未获取到视频文件");
|
}
|
|
const file = {
|
tempFilePath: res.tempFilePath,
|
type: "video",
|
name: `video_${Date.now()}.mp4`,
|
size: res.size || 0,
|
duration: res.duration || 0,
|
createTime: new Date().getTime(),
|
uid: Date.now() + Math.random(),
|
};
|
|
handleBeforeUpload(file);
|
} catch (error) {
|
console.error("处理拍视频结果失败:", error);
|
uni.showToast({
|
title: "处理视频失败",
|
icon: "error",
|
});
|
}
|
},
|
fail: err => {
|
console.error("拍视频失败:", err);
|
uni.showToast({
|
title: "拍视频失败: " + (err.errMsg || "未知错误"),
|
icon: "error",
|
});
|
},
|
});
|
};
|
|
// 文件上传处理
|
const uploadFile = file => {
|
uploading.value = true;
|
uploadProgress.value = 0;
|
number.value++; // 增加上传计数
|
|
// 确保文件路径正确
|
const filePath = file.tempFilePath || file.path;
|
if (!filePath) {
|
handleUploadError("文件路径不存在");
|
return;
|
}
|
|
// 确保token存在
|
const token = getToken();
|
if (!token) {
|
handleUploadError("用户未登录");
|
return;
|
}
|
|
// 准备上传参数
|
const uploadParams = {
|
url: uploadFileUrl.value,
|
filePath: filePath,
|
name: "files",
|
formData: {
|
type: props.statusType || 0,
|
...(props.data || {}),
|
},
|
header: {
|
Authorization: `Bearer ${token}`,
|
},
|
};
|
|
const uploadTask = uni.uploadFile({
|
...uploadParams,
|
success: res => {
|
try {
|
if (res.statusCode === 200) {
|
const response = JSON.parse(res.data);
|
if (response.code === 200) {
|
handleUploadSuccess(response, file);
|
uni.showToast({
|
title: "上传成功",
|
icon: "success",
|
});
|
emit("update:modelValue", fileList.value);
|
} else {
|
handleUploadError(response.msg || "服务器返回错误");
|
}
|
} else {
|
handleUploadError(`服务器错误，状态码: ${res.statusCode}`);
|
}
|
} catch (e) {
|
console.error("解析响应失败:", e);
|
console.error("原始响应数据:", res.data);
|
handleUploadError("响应数据解析失败: " + e.message);
|
}
|
},
|
fail: err => {
|
console.error("上传失败:", err.errMsg || err);
|
number.value--; // 上传失败时减少计数
|
|
let errorMessage = "上传失败";
|
if (err.errMsg) {
|
if (err.errMsg.includes("statusCode: null")) {
|
errorMessage = "网络连接失败，请检查网络设置";
|
} else if (err.errMsg.includes("timeout")) {
|
errorMessage = "上传超时，请重试";
|
} else if (err.errMsg.includes("fail")) {
|
errorMessage = "上传失败，请检查网络连接";
|
} else {
|
errorMessage = err.errMsg;
|
}
|
}
|
|
handleUploadError(errorMessage);
|
},
|
complete: () => {
|
uploading.value = false;
|
uploadProgress.value = 0;
|
},
|
});
|
|
// 监听上传进度
|
if (uploadTask && uploadTask.onProgressUpdate) {
|
uploadTask.onProgressUpdate(res => {
|
uploadProgress.value = res.progress;
|
});
|
}
|
};
|
// 获取媒体文件名
|
const getMediaName = file => {
|
if (file.bucketFilename) {
|
return file.bucketFilename.length > 15
|
? file.bucketFilename.substring(0, 15) + "..."
|
: file.bucketFilename;
|
}
|
if (file.name) {
|
return file.name.length > 15
|
? file.name.substring(0, 15) + "..."
|
: file.name;
|
}
|
return file.type === "image" ? "照片" : "视频";
|
};
|
|
// 格式化文件大小
|
const formatFileSize = size => {
|
if (!size) return "";
|
if (size < 1024) return size + "B";
|
if (size < 1024 * 1024) return (size / 1024).toFixed(1) + "KB";
|
return (size / (1024 * 1024)).toFixed(1) + "MB";
|
};
|
|
// 格式化时间
|
const formatTime = timestamp => {
|
if (!timestamp) return "";
|
const date = new Date(timestamp);
|
const now = new Date();
|
const diff = now - date;
|
|
if (diff < 60000) return "刚刚";
|
if (diff < 3600000) return Math.floor(diff / 60000) + "分钟前";
|
if (diff < 86400000) return Math.floor(diff / 3600000) + "小时前";
|
|
return date.toLocaleDateString();
|
};
|
|
// 预览媒体文件
|
const previewMedia = (file, index) => {
|
if (file.type === "image") {
|
// 预览图片
|
const urls = fileList.value
|
.filter(item => item.type === "image")
|
.map(item => item.url || item.tempFilePath);
|
|
uni.previewImage({
|
urls: urls,
|
current: file.url || file.tempFilePath,
|
});
|
} else if (file.type === "video") {
|
// 预览视频
|
uni.previewVideo({
|
sources: [
|
{
|
src: file.url || file.tempFilePath,
|
type: "mp4",
|
},
|
],
|
current: 0,
|
});
|
}
|
};
|
|
// 下载文件
|
const handleDownload = index => {
|
const file = fileList.value[index];
|
const url = file.url || file.downloadUrl;
|
|
if (!url) {
|
uni.showToast({
|
title: "文件链接不存在，无法下载",
|
icon: "none",
|
});
|
return;
|
}
|
|
// 使用uniapp的下载API
|
uni.downloadFile({
|
url: url,
|
success: res => {
|
if (res.statusCode === 200) {
|
// 保存到相册或文件系统
|
uni.saveFile({
|
tempFilePath: res.tempFilePath,
|
success: saveRes => {
|
uni.showToast({
|
title: "下载成功",
|
icon: "success",
|
});
|
},
|
fail: err => {
|
console.error("保存文件失败:", err);
|
uni.showToast({
|
title: "保存文件失败",
|
icon: "error",
|
});
|
},
|
});
|
}
|
},
|
fail: err => {
|
console.error("下载失败:", err);
|
uni.showToast({
|
title: "下载失败",
|
icon: "error",
|
});
|
},
|
});
|
};
|
|
// 检查网络连接
|
const checkNetworkConnection = () => {
|
return new Promise(resolve => {
|
uni.getNetworkType({
|
success: res => {
|
if (res.networkType === "none") {
|
resolve(false);
|
} else {
|
resolve(true);
|
}
|
},
|
fail: () => {
|
resolve(false);
|
},
|
});
|
});
|
};
|
|
// 上传前校验
|
const handleBeforeUpload = async file => {
|
// 检查网络连接
|
const hasNetwork = await checkNetworkConnection();
|
if (!hasNetwork) {
|
uni.showToast({
|
title: "网络连接不可用，请检查网络设置",
|
icon: "none",
|
});
|
return false;
|
}
|
|
// 校验文件大小
|
if (props.fileSize && file.size) {
|
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
if (!isLt) {
|
uni.showToast({
|
title: `文件大小不能超过 ${props.fileSize} MB!`,
|
icon: "none",
|
});
|
return false;
|
}
|
}
|
|
// 校验视频时长
|
if (
|
file.type === "video" &&
|
file.duration &&
|
file.duration > props.maxVideoDuration
|
) {
|
uni.showToast({
|
title: `视频时长不能超过 ${props.maxVideoDuration} 秒!`,
|
icon: "none",
|
});
|
return false;
|
}
|
|
// 校验文件类型
|
if (
|
props.fileType &&
|
Array.isArray(props.fileType) &&
|
props.fileType.length > 0
|
) {
|
const fileName = file.name || "";
|
const fileExtension = fileName
|
? fileName.split(".").pop().toLowerCase()
|
: "";
|
|
// 根据文件类型确定期望的扩展名
|
let expectedTypes = [];
|
if (file.type === "image") {
|
expectedTypes = ["jpg", "jpeg", "png", "gif", "webp"];
|
} else if (file.type === "video") {
|
expectedTypes = ["mp4", "mov", "avi", "wmv"];
|
}
|
|
// 检查文件扩展名是否在允许的类型中
|
if (fileExtension && expectedTypes.length > 0) {
|
const isAllowed = expectedTypes.some(
|
type => props.fileType.includes(type) && type === fileExtension
|
);
|
|
if (!isAllowed) {
|
uni.showToast({
|
title: `文件格式不支持，请拍摄 ${expectedTypes.join("/")} 格式的文件`,
|
icon: "none",
|
});
|
return false;
|
}
|
}
|
}
|
|
// 校验通过，开始上传
|
uploadFile(file);
|
return true;
|
};
|
|
// 上传失败处理
|
const handleUploadError = (message = "上传文件失败", showRetry = true) => {
|
if (showRetry) {
|
uni.showModal({
|
title: "上传失败",
|
content: message + "，是否重试？",
|
success: res => {
|
if (res.confirm) {
|
// 用户选择重试，这里可以重新触发上传
|
}
|
},
|
});
|
} else {
|
uni.showToast({
|
title: message,
|
icon: "error",
|
});
|
}
|
};
|
|
// 上传成功回调
|
const handleUploadSuccess = (res, file) => {
|
if (
|
res.code === 200 &&
|
res.data &&
|
Array.isArray(res.data) &&
|
res.data.length > 0
|
) {
|
const uploadedFile = res.data[0];
|
// 确保上传的文件数据完整，包含id
|
const fileData = {
|
...file,
|
id: uploadedFile.id, // 添加服务器返回的id
|
url: uploadedFile.url || uploadedFile.downloadUrl,
|
bucketFilename: uploadedFile.bucketFilename || file.name,
|
downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
|
size: uploadedFile.size || file.size,
|
createTime: uploadedFile.createTime || new Date().getTime(),
|
};
|
|
uploadList.value.push(fileData);
|
uploadedSuccessfully();
|
} else {
|
number.value--; // 上传失败时减少计数
|
handleUploadError(res.msg || "上传失败");
|
}
|
};
|
|
// 删除文件
|
const handleDelete = index => {
|
uni.showModal({
|
title: "确认删除",
|
content: "确定要删除这个文件吗？",
|
success: res => {
|
if (res.confirm) {
|
fileList.value.splice(index, 1);
|
emit("update:modelValue", listToString(fileList.value));
|
uni.showToast({
|
title: "删除成功",
|
icon: "success",
|
});
|
}
|
},
|
});
|
};
|
|
// 上传结束处理
|
const uploadedSuccessfully = () => {
|
if (number.value > 0 && uploadList.value.length === number.value) {
|
// 合并已存在的文件和刚上传的文件
|
const existingFiles = fileList.value.filter(f => f.url !== undefined);
|
fileList.value = [...existingFiles, ...uploadList.value];
|
|
// 重置状态
|
uploadList.value = [];
|
number.value = 0;
|
|
// 触发更新事件，传递完整的文件列表
|
emit("update:modelValue", fileList.value);
|
}
|
};
|
|
const listToString = (list, separator = ",") => {
|
const strs = list
|
.filter(item => item.url)
|
.map(item => item.url)
|
.join(separator);
|
return strs;
|
};
|
</script>
|
<style scoped lang="scss">
|
.camera-upload {
|
width: 100%;
|
}
|
|
.camera-buttons {
|
margin-bottom: 15px;
|
|
.button-row {
|
display: flex;
|
gap: 10px;
|
}
|
}
|
|
.upload-tip {
|
font-size: 12px;
|
color: #909399;
|
margin-bottom: 15px;
|
text-align: center;
|
line-height: 1.5;
|
|
.tip-text {
|
margin: 0 2px;
|
}
|
|
.tip-highlight {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
}
|
|
.media-list {
|
margin-top: 10px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
|
.media-item {
|
position: relative;
|
width: 80px;
|
height: 80px;
|
border-radius: 8px;
|
overflow: hidden;
|
background-color: #f5f5f5;
|
border: 2px solid #e9ecef;
|
transition: all 0.3s ease;
|
|
&:hover {
|
border-color: #409eff;
|
transform: scale(1.02);
|
}
|
}
|
|
.media-preview {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
cursor: pointer;
|
|
.preview-image,
|
.preview-video {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.media-type-icon {
|
position: absolute;
|
top: 4px;
|
right: 4px;
|
width: 20px;
|
height: 20px;
|
background-color: rgba(0, 0, 0, 0.6);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.media-actions {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
padding: 4px;
|
display: flex;
|
justify-content: center;
|
opacity: 0;
|
transition: opacity 0.3s ease;
|
|
.media-item:hover & {
|
opacity: 1;
|
}
|
}
|
|
.upload-progress {
|
margin-top: 15px;
|
padding: 0 10px;
|
}
|
</style>
|
