上传头像记录一下!

body:

    <template>
        <div class="uploaderBox">
          <!--  @delete="deleteClzp" 删除事件 -->
          <van-uploader
            class="imagetx"
            :upload-text="'请上传头像'"
            @oversize="onOversize"
            :before-read="beforeRead"
            :after-read="clzpAfterRead"
            :max-count="1"
            :max-size="5 * 1024 * 1024"
            v-model="fileList"
          >
          </van-uploader>
        </div>
      </template>

js:
import http from “…/…/axios/index.js”;(引入封装好的axios)

//校验上传图片大小
    onOversize(file) {
      console.log(file);
      this.$toast("文件大小不能超过5MB");
    },
    //校验图片的格式
    beforeRead(file) {
      if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
        this.$toast("请上传正确格式的图片");
        return false;
      }
      return true;
    },
    //照片上传事件方法
    clzpAfterRead(file) {
      // 上传状态提示开启
      file.status = "uploading";
      file.message = "上传中...";
      // 创建一个空对象实例
      let formData = new FormData();
      // 调用append()方法添加数据
      formData.append("file", file.file);
      http({
        url: "http://47.94.105.86:9001/api/user/v1/upload",
        method: "POST",
        data: formData,

        headers: {
          "content-type": "multipart/form-data",
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "0") {
          // 上传状态提示关闭
          file.status = "done";
          this.$toast("上传成功!");
          this.clzpfilePath = res.data.relativePath; //删除所需参数
          console.log(res.data);
          this.fileList.url = res.data;
        }
      });
    },
    //照片删除事件方法
    // deleteClzp() {
    //   // filePath:删除所需的参数  deleteFiles自定义的删除方法,调接口
    //   deleteFiles({ filePath: this.clzpfilePath }).then((res) => {
    //     if (res.code == "10000") {
    //       this.$toast("删除成功!");
    //     }
    //   });
    // },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐