tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程详情开发完，图片上传组件开发完

Browse Source
This commit is contained in:
田岩
2025-06-25 21:08:48 +08:00
parent c3cfdb3145
commit 1ef7d4d8f0
5 changed files with 241 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/picture-upload/picture-upload.vue
+186 -57
View File
@@ -1,67 +1,196 @@
<template>
<view class="components_custom_file_upload_div pic-cell">
<view v-for="(item,index) in fileList">
<image-preview :imgId="item.fileId"></image-preview>
</view>
<view @tap="upload">
<view class="img-width-height add_icon wh_100">+</view>
</view>
</view>
<view class="components_custom_file_upload_div pic-cell">
<view v-for="(item,index) in fileList" class="img_div pic-item">
<image-preview :imgId="item.fileId" class="img"></image-preview>
</view>
<view @tap="upload" v-show="show_upload_button">
<view class=" add_icon"></view>
</view>
</view>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import common from '@/common/common'
import {
ref,
reactive,
defineProps,
defineEmits,
onMounted,
computed,
watch,
} from 'vue'
import common from '@/common/common'
import { uploadFile } from '@/api/common'
import {
uploadFile
} from '@/api/common'
const show_upload_button = computed(() => {
return !props.readonly && props.limit > fileList.length
})
// 定义props
const props = defineProps({
modelValue: {
type: Array,
default: function() {
return []
}
},
readonly: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 9
},
mark: {
type: [String, Number],
default: ''
}
})
// 状态管理
const fileList = reactive([])
watch(() => props.modelValue, (newVal) => {
fileList.length = 0
if (Array.isArray(newVal)) {
fileList.push(...newVal.map(res => ({
fileId: res
})))
}
// else if ((typeof newVal === "String") && newVal !== '') {
// fileList.push({
// fileId: newVal
// })
// }
}, {
deep: true,
immediate: true
})
// 定义emits
const emits = defineEmits(['update:modelValue'])
// 定义props
const props = defineProps({
modelValue: {
type: String,
default: ''
},
limit: {
type: Number,
default: 9
},
mark: {
type: [String, Number],
default: ''
}
})
// 定义emits
const emits = defineEmits(['upload_success'])
onMounted(() => {
// 状态管理
const fileList = ref([])
})
const showPicture = (urls, current) => {
// const urlsList = urls.map((url) => imgPrefix(url));
// 生命周期钩子
onMounted(() => {
// 初始化逻辑
})
// uni.previewImage({
// current: current || 0,
// urls: urlsList,
// longPressActions: {
// // itemList: ['发送给朋友', '保存图片', '收藏'],
// itemList: ['保存图片'],
// success: function(data) {
// uni.saveImageToPhotosAlbum({
// filePath: urlsList[data.index],
// success: function() {
// // that.$common.msg('下载成功')
// }
// });
// },
// fail: function(err) {}
// }
// });
}
// 方法
const upload = () => {
uni.chooseImage({
count: props.limit,
sizeType: ['original', 'compressed'],
sourceType: ['camera', 'album'],
success: async ({ tempFilePaths }) => {
for (const file of tempFilePaths) {
try {
// 修正：data变量未定义问题
const data = { bizScen: 'S3005' }
const res = await uploadFile(file, data)
console.log('res', res);
fileList.value.push(res)
} catch (error) {
console.error('文件上传失败', error)
}
}
// emits('upload_success', fileList.value)
}
})
}
</script>
// 方法
const upload = () => {
uni.chooseImage({
count: props.limit,
sizeType: ['original', 'compressed'],
sourceType: ['camera', 'album'],
success: async ({
tempFilePaths
}) => {
const data = {
bizScen: 'S3005'
}
const upload_map = tempFilePaths.map((file) => uploadFile(file, data))
Promise.all(upload_map).then(res => {
fileList.push(...res)
emits('update:modelValue', fileList.map(res => res.fileId))
console.log('res, res', res);
}).catch(() => {
})
// for (file of tempFilePaths) {
// try {
// const res = await uploadFile(file, data)
// console.log('res', res);
// fileList.push(res)
// } catch (error) {
// console.error('文件上传失败', error)
// }
// }
// emits('upload_success', fileList.value)
}
})
}
</script>
<style scoped lang="scss">
.components_custom_file_upload_div {
display: flex;
.img_div {
overflow: hidden;
border: 2rpx solid #C0C0C0;
border-radius: 8rpx;
.img {
width: 100%;
height: 100%;
}
}
}
.pic-cell {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.pic-item {
margin-right: 30rpx;
width: 170rpx;
height: 170rpx;
border-radius: 8rpx;
// background-color: red;
margin-bottom: 24rpx;
}
.add_icon {
position: relative;
width: 170rpx;
height: 170rpx;
border: 2rpx dashed #C0C0C0;
border-radius: 8rpx;
&::before {
content: "";
position: absolute;
background-color: #333;
top: calc(50% - 15rpx);
left: 50%;
width: 2rpx;
height: 30rpx;
transform: translateX(-50%);
}
&::after {
content: "";
position: absolute;
background-color: #333;
top: 50%;
left: calc(50% - 15rpx);
width: 30rpx;
height: 2rpx;
transform: translateY(50%);
}
}
</style>