Vue+Vant实现文件上传

引入Vant组件

  <van-uploader v-model="files" multiple :after-read="afterRead" :max-count="1" class="sc" />

定义绑定的初始数据、引入axios

调用接口

	 methods: {
	    afterRead(file) {
	      // 此时可以自行将文件上传至服务器
	      console.log(file);
	      const formData = new FormData();  // 声明一个FormData对象
	      formData.append("file", file.file);
	      axios
	        .post(
	          "http://xxxxxxxx/xxxxx/xxxxxxxx/common/file_upload",
	          formData,
	          {
	            headers: {
	              "content-type": "multer/form-data"
	            }
	          }
	        )
	        .then(res => {
	          this.avatar = res.data.info;
	          console.log(this.avatar);
	        });
	    },
	}
}