Vue3 通过ossId 调用接口获取文件信息,多个或单个

发布时间 2023-06-05 10:49:31作者: kitty20180903suzhou

天呐,离谱了兄弟们!
关于文件上传的问题,在表单提交的时候,对于上传的文件要,新增或修改的接口要传 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);
  })()
}

怎么使用呢?

  1. 先放在全局 main.js
app.config.globalProperties.toOssIdString = ossArrayToIdString
app.config.globalProperties.getFileList = getFileList

  1. 接口传参数 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        

  1. 文件回显
proxy.getFileList(
    {
        electronicSealUrl: supplier.electronicSealUrl, 
    },
    {
        businessLicenseUrl: supplier.businessLicenseUrl, 
    },
    {
        cardBack: supplier.cardBack,
    }
) // 接口返回 {electronicSealUrl : ${file} , businessLicenseUrl: ${file} , cardBack : ${file} }