Vue.js多图上传仅获取文件名 如何正确读取图片文件提交至后端

• 方法名不匹配：页面提交按钮绑定的点击事件是submitFiles()，但你实际定义的上传方法名是submitForm，点击按钮根本不会触发上传逻辑
• 变量引用错误：上传方法里循环遍历的files_s是未定义变量，你实际要读取的应该是已经存在this.files里的文件列表
• 异步逻辑时序错误：FileReader的onload是异步回调，你在循环结束后直接发起请求，此时sal数组还没接收到转码完成的base64结果，传输的数据必然为空
• 请求格式错误：你用application/json格式传输文件对象，JSON序列化无法解析二进制File对象，最终只会传输文件名信息，后端拿不到完整文件内容
• 冗余转码逻辑：把文件转成base64会让传输体积增大30%左右，上传文件直接用FormData二进制传输效率更高，不需要额外转码

页面模板部分 #

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <h2>多图上传</h2>
  <hr/>
  <label>
    <span>选择文件</span>
    <input type="file" multiple @change="handleFileUploads($event)" accept="image/*" />
    <ul v-if="files.length">
      <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
    </ul>
  </label>
  <div>
    <img v-for="image in images" :src="image" style="width:100px;margin:10px;" />
  </div>
  <br />
  <button @click="submitFiles">提交</button>
</div>

Vue逻辑部分 #

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      images: [],
      success_msg: '',
      err_msg: ''
    }
  },
  computed: {
    filesNames() {
      return [...this.files].map(file => file.name)
    }
  },
  methods: {
    handleFileUploads(event) {
      // 把FileList转成普通数组方便后续操作
      this.files = Array.from(event.target.files);
      this.images = this.files.map(URL.createObjectURL);
    },
    submitFiles() {
      if (!this.files.length) {
        alert('请先选择图片');
        return;
      }
      // 构造FormData对象传输文件
      const formData = new FormData();
      // 多文件依次append，后端接收时直接按数组取images字段即可
      this.files.forEach(file => {
        formData.append('images', file);
      })
      axios({
        method: "POST",
        url: "{% url 'service-ad' %}", // Django路由地址
        headers: {
          'X-CSRFTOKEN': '{{ csrf_token }}'
          // 不需要手动设置Content-Type，浏览器会自动生成带boundary的multipart/form-data类型
        },
        data: formData
      }).then(response => {
        this.success_msg = response.data.msg;
      }).catch(err => {
        this.err_msg = err.response.data.err;
      });
    }
  }
})

直接从request.FILES里读取images字段即可拿到完整的文件对象，不需要额外解析base64，存储逻辑和普通单文件上传一致。

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