Vue使用vant上传图片给后台服务器

这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头雾水，不知道该如何去下手，所以就从网上找到了相关的资源，然后发现，上传图片需要用到FromData对象。而且也需要设置相应的响应头。具体代码如下：

这是vant所提供上传图片的组件

<van-uploaderv-model="fileList"multiple:max-count="1":after-read="afterRead"preview-size="200px"class="uploader"ref="file"/>

组件与data中的fileList动态绑定

data() {return {fileList: [],//默认是一个空数组imageData: {},isShow: false,showList: false,};},

这块是将文件读取后进行的回调

afterRead(file) {// 此时可以自行将文件上传至服务器console.log(file);//在这块创建FormData对象// FormData 对象的使用：// 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString// 2. 异步上传二进制文件。//上传图片需要转换二进制这里要用到FormDataconst forms = new FormData();//这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性forms.append("file", file.file); // 获取上传图片信息//向后端发送相应的请求//这块的url是具体的交互接口//headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，//token根据实际情况自行添加axios.post(url, forms, {headers: {"content-type": "multipart/form-data",token: this.token,},}).then((res) => {//如果传入的响应状态码为200，则成功将文件发送给后台if (res.data.status === 200) {console.log(res);//this.imageData = res.data.showapi_res_body;//this.isShow = false;//this.showList = true;//Toast(res.data.showapi_res_body.remark);} else {//Toast(res.data.msg);//this.isShow = false;console.log(res.data.msg)//这块是请求失败后台给返回的相应的数据}});},