input type=“file”上传文件（一）

使用input标签，type=‘file’的时候就可以上传文件，为input标签添加change事件，调用函数。

<input type="file" @change="uploading">

之后再函数里创建formdata对象，将文件append到对象中去

uploading(e) {
    let file = e.target.file[0];
    this.body = new FormData();
    this.body.append('file', file);
    // 这里需要将input的value设置为空，否则再次选择相同的文件便不会触发change事件
    e.target.value = "";
}

接下来将formdata对象通过post传世给后端即可，这里需要设置post的header为multipart/form-data

uploadingClick() {
        let headers = {headers: {"Content-Type": "multipart/form-data"}}
        this.$axios.post(`someApi`,this.body,headers).then(
          res => {
            if (res.data.result_code == 0) {
              // 这里需要delete掉formdata中的file属性，不然再次点击按钮的时候，会上传相同的文件
              this.body.delete('file')
            }
          }
        )
      }

置于如何显示上传的图片，一次上传多张图片，删除以上传的图片如何实现，请见下回分晓