Vue+vant使用uploader上传图片

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

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

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

<van-uploader
  v-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. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      const 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)//这块是请求失败后台给返回的相应的数据
          }
        });
    },