van-uploader上传图片

一、单张人脸图片上传

deletable 是否显示删除按钮，默认false

:max-count="1" 最大上传图片张数

v-model="uploader"  uploader列表类型，组件默认显示的图片

uploader 组件默认显示图片的数组，有具体格式[{url："xxxxx图片地址" }]

:max-size="5 * 1024 * 1024" 文件大小限制

@oversize="onOversize"  限制文件上传函数 超过最大max-size 的时候

:before-read="beforeRead" 上传图片前

:after-read="afterRead" 上传图片后

:before-delete="delImg" 删除图片时

   <van-form ref="forms">
      <!-- 人脸信息 -->
      <van-field
        name="test"
        label="人脸信息"
        :rules="[{ required: true, message: '请上传人脸信息' }]"
      >
        <template #input>
          <van-uploader
            :deletable="!detail"
            :max-count="1"
            v-model="uploader"
            :max-size="5 * 1024 * 1024"
            @oversize="onOversize"
            :before-read="beforeRead"
            :after-read="afterRead"
            :before-delete="delImg"
          />
        </template>
      </van-field>
      <!-- 表单提交按钮，flag属性 在上传图片时禁用按钮，图片上传成功解除禁用 -->
       <van-button
          round
          block
          :disabled="flag"
          type="info"
          native-type="submit"
          @click="subForm()"
          >提交</van-button
        >     
    </van-form>


import { uploadImg } from "@/api/xxx/xxx/upload"; // 到入图片上传接口


  data() {
    return {
      flag: false, // 上传时候禁用上传按钮
      form: {
        faceImg: [], //实际要传的 接口转换后的 图片数据
      },
      uploader: [], // 组件默认显示图片信息
    };
  },

函数方法：

methods:{
    // 获取详情信息
      getDetail(id).then((res) => {
        if (res.code == 200) {
          // 默认显示人脸数据 格式：uploader[{url:'xxxx图片地址'}]
          const imgObj = {};
          imgObj.url = this.GLOBAL.imgUrl + res.data.faceImg;
          // this.form.faceImg 获取详情时候是空 赋值
          this.form.faceImg.push(imgObj);
          // 赋值默认显示图片列表
          this.uploader = this.form.faceImg;
          // console.log("###form", this.form);
          if (this.form.状态字段== "2") {
            this.detail = false; // 切换成详情
          } else {
            this.detail = true; // 切换成详情
          }
        }
      });
    // -----------------------------------------------------------------------
    // 上传图片文件
    // 传一个照片 获取一次uploadImg接口，把file.file文件做参数，要formData类型保存
    // 把后端传的数据保存
    afterRead(file) {
      this.flag = true;
      file.status = "uploading";
      file.message = "上传中...";
      let formData = new FormData(); // 上传图片要formData类型
      // "uploadImage" 这个字段要看后端需要并进行定义
      formData.append("uploadImage", file.file); 
      uploadImg(formData).then((response) => {
        if (response.code == 200) {
          file.status = "done";
          file.message = "上传完成";
          this.flag = false;
          this.form.faceImg.push(response.msg); // 实际提交表单需要传的 接口转换后 图片数据
          this.form.faceImg = this.form.faceImg[0]; // 因为只有一张，直接传1个字符串
        } else {
          file.status = "failed";
          file.message = "上传失败";
        }
      });
    },
    // 上传图片前返回布尔值
    beforeRead(file) {
      if (
        file.type !== "image/png" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/jpg"
      ) {
        this.$toast.fail("请上传 png,jpg格式图片");
        return false;
      }
      return true;
    },
    // 文件上传大小限制
    onOversize(file) {
      this.$toast.fail("图片大小不能超过5M！");
    },
    //删除图片
    delImg(file, detail) {
      return new Promise((resolve, reject) => {
        this.$dialog
          .confirm({
            message: "确定删除图片？",
          })
          .then(() => {
            // this.form.faceImg.splice(detail.index, 1);
            this.form.faceImg = []; // 只有一张直接清空数组
            this.$toast.success("删除成功");
            resolve();
          })
          .catch((error) => {
            this.$toast.success("已取消");
            reject(error);
          });
      });
    },

    // 表单提交
    subForm() {
    // 表单验证
      this.$refs.forms.validate().then(() => {
          // 验证通过
          addPerson(this.form).then((response) => {
            if (response.code == 200) {
              this.$toast.success(
                "上传记录成功",
                this.$router.push({ path: "/xxx" })
              );
            } else {
              this.$toast.fail("上传记录失败");
            }
          });
        })
        .catch(() => {
          console.log("false");
          //验证失败
        });

}}

axios方法：

// 上传图片 参数需要file文件
export function uploadImg(file) {
    return request({
        url: '/xxx/xxx/uploadImg',
        method: 'post',
        data: file,
    })
}

补充：

如果遇到这种情况axios请求中需要加上headers：{。。。}

// 注册页面上传图片文件
export function uploadImg(data) {
  return request({
    url: '/system/bbuploadImg/uploadImg',
    method: 'post',
    data: data, 
    headers: {
      'Content-Type': 'multipart/form-data' // 注意：通常 Axios 会自动设置这个头部，所以这一步可以省略
    }
  })
}