Vue+Vant实现文件上传

最新推荐文章于 2024-08-20 17:59:44 发布

TiAmo_907

最新推荐文章于 2024-08-20 17:59:44 发布

阅读量8.2k

点赞数 1

文章标签： Vue+Vant实现文件上传 Vue实现文件上传

本文链接：https://blog.csdn.net/TiAmo_907/article/details/102710789

版权

文章目录

引入Vant组件
- 定义绑定的初始数据、引入axios
- - 调用接口

引入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);
	        });
	    },
	}
}