Vue3 通过ossId 调用接口获取文件信息,多个或单个
天呐,离谱了兄弟们!
关于文件上传的问题,在表单提交的时候,对于上传的文件要,新增或修改的接口要传 ossId,但是回显的时候又没有给我 ossId,只有文件信息,导致修改的时候就有问题。还有多文件的时候,多个就让我传 文件路径,单个就传 ossId。
我信你个鬼!
直接让后端回显的时候不要给我返回文件信息,前端在需要的时候通过接口获取文件信息就行了
于是 我写了个方法,来获取文件信息,毕竟有些地方文件很多,回显编辑的时候也是个问题
// 将 oss 数组对象 转换成 ossId,ossId,ossId
export const ossArrayToIdString = (ossArray)=>{
return (ossArray || []).map(z=>z.ossId).join(',')
}
// 将 oss 数组对象 添加 name 属性 ,属性值 和 fileName 相同
// arg 包含 {key:'ossId,ossId']} || 'ossId,ossId'
export const getFileList = (...args)=>{
let ossArray = ref({});
return (() => {
(args||[]).forEach((oss, index) => {
if(oss && typeof oss == 'object' && !Array.isArray(oss)){
Object.values(oss).forEach(ossIds=>{
const key = findKey(oss, o=>o == ossIds)
ossArray.value[key] = []
// ossId,ossId 或者 ossId
if(ossIds && typeof ossIds == 'string'){
listByIds(ossIds).then(res=>{
ossArray.value[key] = (res.data || []).map(item=>{
item.name = item.fileName
return item
})
})
}else if(ossIds && ossIds.some(z=>(typeof z == 'object' && z.ossId && z.name && z.url))){
ossArray.value[key] = ossIds || []
}else{
ossArray.value[key] = []
}
})
}else if(oss && typeof oss == 'string'){
ossArray.value['ossList'] = []
listByIds(oss).then(res=>{
ossArray.value['ossList'] = (res.data || []).map(item=>{
item.name = item.fileName
return item
})
})
}else if(oss && typeof oss == 'object' && oss.some(z=>(typeof z == 'object' && z.ossId && z.name && z.url))){
ossArray.value['ossList'] = oss
}else{
ossArray.value['ossList'] = []
}
})
return toRefs(ossArray.value);
})()
}
怎么使用呢?
- 先放在全局 main.js
app.config.globalProperties.toOssIdString = ossArrayToIdString
app.config.globalProperties.getFileList = getFileList
- 接口传参数 ossId,ossId
const file = {
"url": "https://xxx/e0ec3a6db4d44f19525951fafd2c11e.jpeg",
"name": "5950019b-485f-41a1-b911-eb3153d55849.jpeg",
"ossId": "16558560322842333585",
"uid": 1683621821610,
"status": "success"
}
proxy.toOssIdString(file) // 返回 ossId,ossId
- 文件回显
proxy.getFileList(
{
electronicSealUrl: supplier.electronicSealUrl,
},
{
businessLicenseUrl: supplier.businessLicenseUrl,
},
{
cardBack: supplier.cardBack,
}
) // 接口返回 {electronicSealUrl : ${file} , businessLicenseUrl: ${file} , cardBack : ${file} }
作者:胡倩倩0903
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
posted on 2023-06-05 10:45 kitty20180903suzhou 阅读(138) 评论(0) 编辑 收藏 举报