v-for循环中使用vue-filepond时v-model绑定值为空如何解决

核心导致v-model绑定为空的原因有3个，对应修复即可：

• 响应式属性缺失：Vue2无法检测对象后续新增的属性，如果初始化portfolio数组时没有给每个项提前声明photo字段，后续组件给input.photo赋值时不会触发视图更新，也无法在方法中读取到更新后的值
• 自定义上传回调逻辑缺失：开了instantUpload自定义服务端上传时，process回调内必须在上传成功后调用load()方法回传文件唯一标识，组件才会将文件标记为上传完成、同步到v-model绑定值中，未调用该方法时组件会判定文件处于上传中状态，不会更新绑定值
• 配置冲突+属性类型错误：同时配置allow-multiple="true"和max-files="1"存在逻辑冲突，且未用v-bind绑定布尔类属性时，传入的是字符串"true"而非布尔值，会导致组件内部状态判断异常

正确实现步骤 #

1. 初始化数据时提前声明响应式字段

// Vue2 示例
data() {
  return {
    // 初始化数组时，每个项必须提前带photo字段，默认值为空数组（filepond v-model默认返回数组类型）
    portfolio: [
      { photo: [] }
    ],
    portfolioRefs: [], // 存循环内的组件实例，避免重复ref冲突
    // 自定义上传服务配置
    server: {
      process: (fieldName, file, metadata, load, error, progress, abort) => {
        const formData = new FormData()
        formData.append(fieldName, file)
        // 替换为实际上传接口
        axios.post('/api/upload', formData, {
          onUploadProgress: e => progress(e.lengthComputable, e.loaded, e.total)
        }).then(res => {
          // 核心：上传成功必须调用load，传后端返回的文件唯一id，组件才会同步值到v-model
          load(res.data.fileId)
        }).catch(() => {
          error('上传失败')
        })
        return {
          abort: () => abort()
        }
      },
      revert: null,
      restore: null,
      load: null,
      fetch: null
    }
  }
},
// 后续新增portfolio项时，必须用$set保证响应式
methods: {
  addPortfolioItem() {
    this.$set(this.portfolio, this.portfolio.length, { photo: [] })
  }
}

如果是Vue3项目，ref/reactive初始化时给每个项带上photo: []默认值即可，不需要$set处理。

2. 修正模板配置

<template>
  <div 
    v-for="(input, index) in portfolio"
    :key="`portfolio-${index}`"
    class="pb-4"
  >
    <div class="grid grid-cols-1 gap-4">
      <div>
        <file-pond
          :name="`userPorfolio-${index}`"
          :ref="el => portfolioRefs[index] = el"
          accepted-file-types="image/jpeg, image/png"
          :allow-multiple="false"
          :instant-upload="true"
          :max-files="1"
          class="h-full"
          v-model="input.photo"
          :server="server"
        />
      </div>
    </div>
  </div>
</template>

注意所有布尔类型的组件属性都要加:绑定为布尔值，不要直接写属性名传字符串；单文件上传场景下关闭allow-multiple避免配置冲突；循环内的ref用动态函数绑定，避免同ref名只获取最后一个实例的问题。

3. 正确读取绑定值
   vue-filepond的v-model绑定值始终是数组类型，哪怕配置了max-files=1，取数时按数组读取即可：

getPortfolioFiles() {
  this.portfolio.forEach(item => {
    if (item.photo.length) {
      const currentFile = item.photo[0]
      // currentFile.serverId 是上传成功时load方法传入的服务端文件id
      // currentFile.file 是本地原始File对象
      console.log(currentFile)
    }
  })
}

内容的提问来源于stack exchange，提问作者andysay