前端上传图片,后台识别不到file对象

前端上传图片file对象什么的都可以打印出来,但是后台就是识别不到file对象
上传图片的代码如下

<template>

  <div class="upload">

    <div class="upload_warp_upload">

        <span v-for="(item,index) of imgList" class="upload_span">

           <img :src="item.url">

            <span @click="fileDel(index)" class="upload_del"></span>

        </span>

        <div class="upload_warp_left" @click.stop="fileChange">

          <span>+</span>

        </div>

      </div>

      <input accept="image/*"

             @change.stop="fileChange($event)"

             type="file" id="upload_file" style="display: none"/>


    </div>

  </div>

</template>

<script>

  export default {

    data(){

      return {

        imgData:[],

        imgList: [],

        size: 0,

      }

    },

    methods:{

        fileClick() {

          document.getElementById('upload_file').click();

        },

        fileChange() {

            let reader = new FileReader();

            let file = e.path[0].files[0];

            reader.readAsDataURL(file);

            let that = this;

            reader.onloadend = function () {

              let url = reader.result;

              that.imgList.push({url: url, name :file.name});

              that.$messageBox('成功');

              that.imgData.push(file);

              that.$emit('imageListChange', that.imgData);

            };

        },

        fileDel(index) {

          this.imgList.splice(index, 1);

        },

      }

  }

</script>

前端打印出来的file对象
https://img2.mukewang.com/5c9dbabb00016f7b06130388.jpg

network中的数据:
https://img.mukewang.com/5c9dbabd000197e807040237.jpg

各位大神啊~这是咋回事啊,我已经接近崩溃了


潇潇雨雨
浏览 2003回答 4
4回答

紫衣仙女

得通过name属性来获取file对象把

慕码人8056858

我看你直接把file,push到imgData里面了。每次上传文件到后台,我的做法是var formData = new FormData();formData.append('file' , files[i]);然后ajax,直接把formData 传给后台,这样后台就可以识别file。

侃侃尔雅

哈哈哈哈哈~~~ 打死后台
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript