Vue.js中如何以数组形式上传多张图片并绑定isAnswer布尔值

1. 调整data数据结构 #

首先完善你data里的formData字段，新增qOptions数组和正确选项索引标记：

export default {
  data() {
    return {
      // 记录选中的正确答案索引，默认第一个为正确答案
      selectedAnswerIndex: 0,
      formData: {
        qImage: "",
        qText: "",
        qDifficultyLevel: "",
        // 初始化4个选项结构
        qOptions: [
          {option: "", isAnswer: false},
          {option: "", isAnswer: false},
          {option: "", isAnswer: false},
          {option: "", isAnswer: false},
        ],
        qAnswer: 0
      },
    }
  },
  methods: {
    // 题目图片上传处理
    puzzleImage(e) {
      const file = e.target.files[0]
      // 这里写你的图片上传逻辑，上传后拿到服务端返回的url赋值给formData.qImage
      // 示例：上传后拿到url后执行 this.formData.qImage = res.url
    },
    // 选项图片上传处理，传入对应选项索引
    handleOptionImage(e, index) {
      const file = e.target.files[0]
      // 上传图片拿到url后赋值给对应位置的option字段
      // 示例：上传后拿到url后执行 this.formData.qOptions[index].option = res.url
    },
    // 表单提交逻辑
    handleSubmit() {
      // 批量设置isAnswer状态
      this.formData.qOptions.forEach((item, idx) => {
        item.isAnswer = idx === this.selectedAnswerIndex
      })
      this.formData.qAnswer = this.selectedAnswerIndex
      // 此处提交formData即可，结构与你期望的完全一致
      console.log(this.formData)
    }
  }
}

2. 修改模板中的Puzzle Answers字段代码 #

把原来单个的答案上传框替换为循环渲染的4组上传+正确答案选择组件：

<div class="md-layout-item md-small-size-100 md-size-75">
  <label>Puzzle Answers</label><br />
  <!-- 循环渲染4个选项上传区域 -->
  <div v-for="(opt, index) in formData.qOptions" :key="index" style="margin: 15px 0;">
    <span>选项{{index+1}}：</span>
    <input
      class="form-control"
      type="file"
      @change="e => handleOptionImage(e, index)"
    />
    <!-- 单选按钮选择当前选项为正确答案 -->
    <md-radio v-model="selectedAnswerIndex" :value="index" style="margin-left: 10px;">设为正确答案</md-radio>
  </div>
</div>

同时修改表单提交事件绑定：

<form @submit.prevent="handleSubmit">

说明 #

如果你的提交方式是直接传FormData二进制格式而非JSON，只需要在提交时把所有图片文件按索引顺序append到FormData对象里，同时把isAnswer和qAnswer参数也一起带上即可。

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