巡检点上传图片修正
This commit is contained in:
Zy
261
wuye-manager-uniapp/components/filePicker/filePicker.vue
Normal file
261
wuye-manager-uniapp/components/filePicker/filePicker.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="simple-uploader">
|
||||
<!-- 图片列表 -->
|
||||
<view class="image-list">
|
||||
<!-- 已选图片 -->
|
||||
<view v-for="(img, index) in innerList" :key="index" class="image-item">
|
||||
<image :src="img.url || img" class="img" mode="aspectFill" @tap="preview(index)"></image>
|
||||
<!-- 删除按钮 -->
|
||||
<view class="delete-btn" @tap.stop="remove(index)">
|
||||
<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<!-- 上传状态 -->
|
||||
<view v-if="img.uploading" class="uploading-mask">
|
||||
<text>上传中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 添加按钮 -->
|
||||
<view class="add-btn" @tap="choose">
|
||||
<uni-icons color="#a6a6a6" type="plusempty" size="25"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
// ======================
|
||||
// Props（可配置）
|
||||
// ======================
|
||||
const props = defineProps({
|
||||
// 双向绑定的图片列表
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/** 多选 最多上传数量 默认9*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 9
|
||||
},
|
||||
// 选图来源：album（相册）/ camera（拍照）
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default: () => ['album', 'camera']
|
||||
},
|
||||
// 图片大小：original（原图）/ compressed（压缩图）
|
||||
sizeType: {
|
||||
type: Array,
|
||||
default: () => ['compressed']
|
||||
},
|
||||
// 后端上传接口地址（必填）
|
||||
uploadUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 后端接收的文件字段名
|
||||
fileFieldName: {
|
||||
type: String,
|
||||
default: 'file'
|
||||
},
|
||||
// ✅ 新增：上传时携带的额外参数
|
||||
extraData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// ======================
|
||||
// Emits
|
||||
// ======================
|
||||
const emit = defineEmits(['update:modelValue', 'success', 'fail', 'remove'])
|
||||
|
||||
// ======================
|
||||
// 内部数据
|
||||
// ======================
|
||||
const innerList = ref([])
|
||||
|
||||
// 监听外部数据变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
newVal => {
|
||||
innerList.value = newVal.map(item => {
|
||||
if (typeof item === 'string') {
|
||||
return { url: item }
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
// ======================
|
||||
// 核心方法
|
||||
// ======================
|
||||
|
||||
// 1. 选择图片
|
||||
function choose() {
|
||||
uni.chooseImage({
|
||||
count: props.limit,
|
||||
sourceType: props.sourceType,
|
||||
sizeType: props.sizeType,
|
||||
success: async res => {
|
||||
const tempPaths = res.tempFilePaths
|
||||
|
||||
// 如果没传上传接口，只返回临时路径
|
||||
if (!props.uploadUrl) {
|
||||
const newItems = tempPaths.map(path => ({ url: path }))
|
||||
innerList.value = [...innerList.value, ...newItems]
|
||||
emit(
|
||||
'update:modelValue',
|
||||
innerList.value.map(i => i.url)
|
||||
)
|
||||
emit('success', { tempFilePaths: tempPaths })
|
||||
return
|
||||
}
|
||||
|
||||
// 有上传接口，自动上传
|
||||
for (const path of tempPaths) {
|
||||
await uploadSingle(path)
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log('选图失败', err)
|
||||
emit('fail', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 2. 上传单张图片
|
||||
async function uploadSingle(filePath) {
|
||||
// 先添加到列表，标记为上传中
|
||||
const tempItem = { url: filePath, uploading: true }
|
||||
innerList.value = [...innerList.value, tempItem]
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: props.uploadUrl,
|
||||
filePath: filePath,
|
||||
name: props.fileFieldName,
|
||||
// ✅ 新增：携带额外参数
|
||||
formData: props.extraData,
|
||||
success: res => {
|
||||
try {
|
||||
const data = JSON.parse(res.data)
|
||||
|
||||
// 假设后端返回格式：{ code: 200, url: "https://xxx.com/xxx.png" }
|
||||
// 如果你的后端返回格式不同，请在这里修改
|
||||
if (data.code === 200 || data.url) {
|
||||
const finalUrl = data.url || data.data?.url
|
||||
// 更新列表，替换为网络 URL
|
||||
const index = innerList.value.findIndex(item => item.url === filePath)
|
||||
if (index !== -1) {
|
||||
innerList.value[index] = { url: finalUrl, uploading: false }
|
||||
}
|
||||
emit(
|
||||
'update:modelValue',
|
||||
innerList.value.map(i => i.url)
|
||||
)
|
||||
emit('success', { url: finalUrl, tempPath: filePath })
|
||||
resolve(finalUrl)
|
||||
} else {
|
||||
throw new Error(data.msg || '上传失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析上传结果失败', e)
|
||||
remove(innerList.value.findIndex(item => item.url === filePath))
|
||||
emit('fail', e)
|
||||
reject(e)
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.error('上传失败', err)
|
||||
remove(innerList.value.findIndex(item => item.url === filePath))
|
||||
emit('fail', err)
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 3. 删除图片
|
||||
function remove(index) {
|
||||
const removed = innerList.value.splice(index, 1)[0]
|
||||
emit(
|
||||
'update:modelValue',
|
||||
innerList.value.map(i => i.url)
|
||||
)
|
||||
emit('remove', { index, url: removed.url })
|
||||
}
|
||||
|
||||
// 4. 预览图片
|
||||
function preview(index) {
|
||||
const urls = innerList.value.map(i => i.url)
|
||||
uni.previewImage({
|
||||
urls: urls,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.simple-uploader {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.uploading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #f3f3f3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user