自定义图片上传

组件

<template>
  <div>
    <input
      type="file"
      id="upLoad"
      name="upLoad"
      ref="upLoadRef"
      @change="onchangemd"
      accept="image/jpg, image/jpeg, image/png"
      style="opacity: 0"
      class="uploadbutton"
    />
  </div>
</template>

<script>
  import { uploadImg } from "@/api/common";
  export default {
    data() {
      return {
        message: "图片上传",
      };
    },
    methods: {
      onchangemd(e) {
        console.log(e.target.files);
        //这个就是选中文件信息
        Array.from(e.target.files).map((item) => {
          if (item.type != "image/jpeg" && item.type != "image/png") {
            this.$message.error("请上传图片格式文件");
            return;
          }
          console.log(item);
          let formdata = new FormData();
          formdata.append("image", item); //将每一个文件图片都加进formdata
          formdata.append("module", "page");
          uploadImg(formdata)
            .then((res) => {
              if (res.code == 200) {
                // 上传成功后发射走地址
                this.$emit("changImgList", res.data.path_real);
              } else {
                this.$message.error({
                  message: "上传失败",
                  duration: 3000,
                  offset: 300,
                });
              }
            })
            .catch((e) => console.log(e));
        });
      },
    },
  };
</script>

<style scoped>
  .uploadbutton {
    position: absolute;
    width: 411px;
    height: 232px;
    line-height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    left: 126px;
    top: 112px;
    cursor: pointer;
  }
</style>