148 lines
3.7 KiB
Vue
148 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import type { UploadFile, UploadFileItem } from 'sard-uniapp'
|
|
import { isImageUrl, isVideoUrl, toast } from 'sard-uniapp'
|
|
import { aliyunpluploadApi, delSubRecordApi, searchdataApi } from '@/request/api'
|
|
import { downloadFile, formatFileSize, imageCompress, isImage, uploadFileToAliyun } from '@/utils/file'
|
|
import { isH5 } from '@/utils/platform'
|
|
|
|
const fileList = ref<UploadFileItem[]>([])
|
|
|
|
const isEdit = ref(true)
|
|
|
|
const aliyunBucket = import.meta.env.VITE_ALIYUN_BUCKET
|
|
const father = ref('')
|
|
const moduleid = ref('')
|
|
const cateid = ref('')
|
|
|
|
onLoad((options) => {
|
|
father.value = options.father
|
|
moduleid.value = options.moduleid
|
|
cateid.value = options.cateid || ''
|
|
|
|
const edit = options.edit || '0'
|
|
isEdit.value = edit === '1'
|
|
|
|
nextTick(() => {
|
|
loadFileData()
|
|
})
|
|
})
|
|
|
|
async function loadFileData() {
|
|
let searchcondition = ` father = '${father.value}' and mx_moduleid = '${moduleid.value}'`
|
|
if (cateid.value !== '') {
|
|
searchcondition += ` and mx_cate_id = '${cateid.value}'`
|
|
}
|
|
searchdataApi({
|
|
viewname: 'bf_files',
|
|
searchcondition,
|
|
orderfield: '',
|
|
}).then((res) => {
|
|
fileList.value = res.data.map((item) => {
|
|
return {
|
|
...item,
|
|
name: item.mx_filename,
|
|
url: item.mx_mapfilename,
|
|
}
|
|
})
|
|
|
|
console.log(fileList.value)
|
|
})
|
|
}
|
|
|
|
function onItemClick(fileItem: UploadFileItem) {
|
|
if (!isImageUrl(fileItem.mx_mapfilename) && !isVideoUrl(fileItem.mx_mapfilename)) {
|
|
downloadFile(fileItem.mx_mapfilename)
|
|
}
|
|
}
|
|
|
|
function beforeRead(file: UploadFile): boolean | Promise<UploadFile> {
|
|
// 非图片直接允许上传
|
|
if (!isImage(file.name))
|
|
return true
|
|
|
|
// 图片异步压缩，返回修改后的 UploadFile 对象
|
|
return imageCompress(file.path).then((res) => {
|
|
console.log(res)
|
|
|
|
file.path = res.path
|
|
file.size = res.size
|
|
return file
|
|
}).catch((err) => {
|
|
console.error('图片压缩失败：', err)
|
|
return file
|
|
})
|
|
}
|
|
|
|
async function afterRead(fileItem: UploadFileItem) {
|
|
try {
|
|
// 设置上传中状态
|
|
fileItem.status = 'uploading'
|
|
fileItem.message = '正在上传'
|
|
fileList.value = [...fileList.value]
|
|
|
|
// 上传到阿里云
|
|
const res = await uploadFileToAliyun(
|
|
fileItem.file.path,
|
|
fileItem.file.name,
|
|
fileItem.file.type,
|
|
)
|
|
|
|
if (!res.url)
|
|
throw new Error('上传失败：未获取到文件 URL')
|
|
|
|
// 调用后端接口保存文件信息
|
|
const saveRes = await aliyunpluploadApi({
|
|
despathfile: res.url,
|
|
myfilename: fileItem.file.name,
|
|
size: formatFileSize(fileItem.file.size),
|
|
tablename: 'bf_files',
|
|
sid: father.value,
|
|
mx_moduleid: moduleid.value,
|
|
mx_cate_id: cateid.value,
|
|
})
|
|
|
|
if (saveRes.data === 'OK') {
|
|
// 上传完成
|
|
fileItem.status = 'done'
|
|
fileItem.message = '上传成功'
|
|
}
|
|
else {
|
|
// 后端返回非 OK
|
|
throw new Error(saveRes.data || '上传失败')
|
|
}
|
|
|
|
fileList.value = [...fileList.value]
|
|
}
|
|
catch (err: any) {
|
|
console.error('上传失败:', err)
|
|
fileItem.status = 'failed'
|
|
fileItem.message = err.message || '上传失败'
|
|
fileList.value = [...fileList.value]
|
|
}
|
|
}
|
|
|
|
function onRemove(index: number, item: UploadFileItem) {
|
|
delSubRecordApi({
|
|
module: 'bf_files',
|
|
id: item.subid,
|
|
bucketName: aliyunBucket,
|
|
}).then((res) => {
|
|
if (res.data.result) {
|
|
toast.success('删除成功')
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="file">
|
|
<sar-upload v-model="fileList" :readonly="!isEdit" :after-read="afterRead" :before-read="beforeRead" multiple @item-click="onItemClick" @remove="onRemove" />
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.file {
|
|
padding: 36rpx;
|
|
}
|
|
</style>
|