vue2.0 使用axios提交form表单，为什么 上传文件格式的内容时是空的？

Question

主要是input[type='file']这里的内容时空的

  <div class="subForm">
    <el-form :model="waterForm" :rules="rules" ref="waterForm" label-width="6rem">
      <el-form-item label="产品分类">
        <el-select v-model="waterForm.sec" placeholder="请选择" prop="sec">
          <el-option key="water" label="生态净水剂系列" value="water"></el-option>
          <el-option key="film" label="工业膜系列产品" value="film"></el-option>
          <el-option key="dete" label="实时在线检测产品" value="dete"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="净水机型号" prop="name">
        <el-input v-model="waterForm.name"></el-input>
      </el-form-item>

      <el-form-item label="简介" prop="jj">
        <el-input type="textarea" v-model="waterForm.jj"></el-input>
        </el-form-item>

      <el-form-item label="图片上传" prop="pic">
        <input type="file" @change="getFile($event)"></input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit($event)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>

<script>
  export default {
    data() {
      return {
        waterForm: {
          name: '',
          sec: '',
          jj: '',
          file: ''
        },
        rules: {
          sec : [
            { required: true, message: '请选择产品分类', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入净水剂型号', trigger: 'blur' }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          jj : [
            { required: true, message: '请选择产品简介', trigger: 'blur' }
          ],
          pic : [
            { required: true, message: '请上传图片', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      getFile(event) {
        this.waterForm.file = event.target.files[0];
      },
      onSubmit(event) {
        event.preventDefault();

        let formData = JSON.stringify(this.waterForm);

        console.log(formData);//这里的内容在下面
        this.$http.post('', formData).then(function (res) {
          if (res.status === 2000) {
            /*这里做处理*/
          }
        })
      }
    }
  }
</script>

表单输入

浏览器控制台输出

file里面是空的 没有内容

---

浏览器控制台输出的formData是这样的，是对的吗？

Answer 1

没设置上传的headr吧，，上传图片要用formData上传，不要用JSON转字符串，后台接不到的， post的formData后要加{headers:{'Content-Type':'multipart/form-data'}}，还有html中要有form

var formData = new FormData($("#myForm"));
formData.append("upfile", document.getElementById('file').files[0]);
formData.append("aaa", 111);//添加其他需要上传的数据，这里可以用JSON.stringify转，涉及file上传的切记不要转;
let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
this.$http.post('', formData,config).then(function (res) {
          if (res.status === 2000) {
            /*这里做处理*/
          }
        })

Answer 2

您这边问题解决了吗？ 我也是卡到了这里