本地上传策略

1、在 Vue2 中进行本地图片批量上传，可以使用以下步骤：

1. 创建一个 input 元素，设置 type 为 file，multiple 属性为 true，用于选择多个文件：

<input type="file" multiple @change="handleFileChange">

2. 在 Vue 实例中定义一个 data 属性，用于存储选择的文件列表：

data() {
  return {
    fileList: []
  }
}

3. 在 handleFileChange 方法中，获取选择的文件列表，并将每个文件转换成一个对象，包含文件名、文件大小和文件对象等属性，然后将这些对象添加到 fileList 数组中：

handleFileChange(e) {
  const files = e.target.files
  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    const fileObj = {
      name: file.name,
      size: file.size,
      file: file
    }
    this.fileList.push(fileObj)
  }
}

4. 在模板中显示选择的文件列表，并添加上传按钮，用于将文件上传到服务器：

<div>
  <ul>
    <li v-for="file in fileList" :key="file.name">
      {{ file.name }} ({{ file.size }} bytes)
    </li>
  </ul>
  <button @click="uploadFiles">上传</button>
</div>

5. 在 uploadFiles 方法中，使用 FormData 将选择的文件列表上传到服务器：

uploadFiles() {
  const formData = new FormData()
  for (let i = 0; i < this.fileList.length; i++) {
    const file = this.fileList[i].file
    formData.append('files[]', file)
  }
  axios.post('/upload', formData).then(response => {
    // 处理上传成功的回调
  }).catch(error => {
    // 处理上传失败的回调
  })
}

这样就完成了本地图片批量上传的实现。注意，这只是一个基本的示例，实际应用中可能需要添加更多的逻辑，比如限制上传文件类型、文件大小等。