Vue+vant使用uploader上传图片

今天药忘吃喽~ 2023-01-15 03:56 685阅读 0赞

# 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)//这块是请求失败后台给返回的相应的数据
              }
            });
        },