vue.js上传文件到后端

78 阅读1分钟

上传文件前端代码如下

`

<input type="file" @change="getFile($event)" /><button @click="upload">上传</button>

<div>{{ result }}</div>

<div v-show="uping==1">正在上传中</div>

 data: {
 
      upath: '',
      result: '',
      uping:0
 
    },
 
    methods: {
 
      upload: function () {
 
        //console.log(this.upath);
 
        var zipFormData = new FormData();
 
        zipFormData.append('filename', this.upath);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
 
        let config = { headers: { 'Content-Type': 'multipart/form-data' } };
 
        this.uping = 1;
 
        this.$http.post('http://localhost:42565/home/up', zipFormData,config).then(function (response) {
 
          console.log(response);
 
          console.log(response.data);
 
          console.log(response.bodyText);
 
           
 
          var resultobj = response.data;
 
          this.uping = 0;
 
          this.result = resultobj.msg;
 
        });
 
      },
 
 
 
      getFile: function (even) {
 
        this.upath = event.target.files[0];
 
      },
 
    }

`