项目心得八

toast组件loading的使用：

      this.$toast.loading({
        message: "修改中...",
        forbidClick: true,
        duration: 0,
      });
-----------------------------------
 this.$toast.success("修改成功！");

封装组件：

<template>
  <div class="updateGender">
    <!-- @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange" -->
    <van-picker title="标题" show-toolbar :columns="columns"
    :default-index="value" @cancel="$emit('close')" @change="onChange"
    @confirm="onComfirm"/>
  </div>
</template>

<script>
import { updateUserProfile } from "@/api/user";
export default {
  name: "updateGender",
  components: {},
  props: {
    value: {
      type: Number,
      required: true,
      localGender: 0,
    },
  },
  data() {
    return {
      columns: ["男", "女"],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onChange(picker, value, index) {
      this.localGender = index;
    },
    async onComfirm() {
      const localGender = this.localGender;
      this.$toast.loading({
        message: "修改中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        await updateUserProfile({
          gender: localGender,
        });
        // 更新视图
        this.$emit("input", localGender);
        // 关闭弹层
        this.$emit("close");
        this.$toast.success("修改成功！");
      } catch (error) {
        this.$toast("修改失败！");
      }
    },
  },
};
</script>
<style lang="less" scoped></style>

上传图片文件预览操作：

 <input type="file" hidden ref="file" @change="onChangeFile">
-----------------------------------------------------------------
    onChangeFile() {
        const file = this.$refs.file.files[0]
        // 转化blob地址
        this.img = window.URL.createObjectURL(file)
        this.isUpdatePhotoShow = true
        // 解决选择相同图片，不触发change
        this.$refs.file.value = ""
    }

发送请求字段：

Content-Type:application/json ===> 普通js对象
Content-Type：multipart/form-data === ：formData = new FormData()