vue上传图片-banner上传（单张）

<div class="stting_box">
  <div>首页广告位设置</div>
  <div class="lfzImgs">
    <div class="lfzImg">
      <el-button class="btn" type="primary" @click="removeImg6">删除</el-button>
      <div class="lfzCenter">
        <el-upload
          class="avatar-uploader"
          action="https://up.qiniup.com/"
          :headers="uploader.headers"
          :name="uploader.name"
          :data="uploader.data"
          :limit="uploader.limit.main_thumb"
          :show-file-list="false"
          :on-success="handleAvatarSuccess6"
          :before-upload="beforeAvatarUpload"
          accept=".jpg, .png, .gif"
        >
          <img v-if="imgLists.imageUrl" :src="imgLists.imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div style="display:flex;align-items:center">
        <span class="links">链接</span>
        <el-input
          class="lfzInput"
          v-model="imgLists.linkUrl"
          placeholder="请输入链接"
          show-word-limit
        ></el-input>
      </div>
      <div style="display:flex;align-items:center;margin-top:10px">
        <span class="links">app链接</span>
        <el-input
          class="lfzInput"
          v-model="imgLists.applinkUrl"
          placeholder="请输入链接"
          show-word-limit
        ></el-input>
      </div>
    </div>
  </div>
  <div class="lfzCenter" style="margin-top:20px">
    <el-button type="primary" @click="submit('2')">保存</el-button>
  </div>
</div>

数据模型：

data() {
 return {
   imgLists: {
     imageUrl: "",
     linkUrl: "",
     applinkUrl: "",
     siteType: 2
   },
   uploader: {
     action: "https://up.qiniup.com/",
     headers: {}, //设置上传请求头
     name: "file", //上传的文件字段名
     //data上传时附带的额外参数，此时从缓存中取token
     data: {
       token: localStorage.getItem("qiniuToken")
     },
     //limit最大允许上传个数
     limit: {
       main_thumb: 6
     }
   }
 };

mounted：

 mounted() {
   this.onGetUploaderToken();
   this.getImgList(2);
 },

methods:

 /**
 * @description 获取骑牛云token
 * */
onGetUploaderToken: function() {
  get("/sys/merchant/qnToken/hxt-mini-img").then(result => {
    if (result.code === 200) {
      //把token存入缓存中（封装到了storage里面）
      storage.set("qiniuToken", result.data.qnToken, () => {});
      //把token存入缓存中（不使用封装的组件，直接存到缓存里面）
      // localStorage.setItem('qiniuToken', result.data.qnToken);
      this.uploader.data.token = result.data.qnToken;
    }
  });
},
//限制图片的大小和格式
beforeAvatarUpload(file) {
  var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
  const extension =
    testmsg === "jpg" ||
    testmsg === "JPG" ||
    testmsg === "png" ||
    testmsg === "PNG" ||
    testmsg === "gif";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!extension) {
    this.$message({
      message: "上传图片只能是jpg/png/gif格式!",
      type: "error"
    });
    return false; //必须加上return false; 才能阻止
  }
  if (!isLt2M) {
    this.$message({
      message: "上传文件大小不能超过 2MB!",
      type: "error"
    });
    return false;
  }
  return extension || isLt2M;
},
//文件上传成功时的钩子（让上传的图片显示出来）
handleAvatarSuccess6(res) {
  this.imgLists.imageUrl = "https://hxt-img.baimokc.com/" + res.key;
},
//获取banner
getImgList(type) {
  console.log(type);
  let params = {
    siteType: type
  };
  get("/sys/banner/list", params).then(res => {
    if (res.code === 200) {
      if (type == 1) {
        this.imgList = res.data;
        this.timeLine = res.data[0].timeLine;
      } else {
        if (res.data[0]) {
          this.imgLists = res.data[0];
        } else {
          this.imgLists = {
            imageUrl: "",
            linkUrl: "",
            applinkUrl: "",
            siteType: 2
          };
        }
      }
      console.log(this.imgList);
    } else {
      try {
        this.$message.error(res.data);
      } catch {
        this.$message.error(res.msg);
      }
    }
  });
},
// 删除banner
del(id, type, index) {
  if (id) {
    post("/sys/banner/del?id=" + id).then(result => {
      if (result.code === 200) {
        this.$message.success("删除成功！");
        console.log(this.imgList);
        console.log(this.imgLists);
        if (type == "1") {
          // this.getImgList(1);
          this.imgList.splice(index, 1);
        } else {
          this.getImgList(2);
        }
        console.log(this.imgList);
        console.log(this.imgLists);
      } else {
        try {
          this.$message.error(result.data);
        } catch {
          this.$message.error(result.msg);
        }
      }
    });
  } else {
    if (type == "1") {
      this.imgList.splice(index, 1);
    } else {
      this.imgLists.imageUrl = "";
      this.imgLists.linkUrl = "";
      this.imgLists.applinkUrl = "";
      this.imgLists.siteType = 2;
    }
  }
},
removeImg6() {
  this.del(this.imgLists.id, "2");
},
//提交banner
add(type) {
  if (type == "1") {
    this.imgList.forEach((item, index) => {
      item.sort = index + 1;
    });
  } else {
    this.imgLists.sort = 1;
  }
  let params = {
    bannerToList: type == "1" ? this.imgList : [this.imgLists],
    // timeLine: this.timeLine ? parseFloat(this.timeLine) : 0,
    timeLine: type == "1" ? parseFloat(this.timeLine) : ""
  };
  post("/sys/banner/add", params).then(result => {
    if (result.code === 200) {
      this.$message.success("上传成功！");
      if (type == "1") {
        this.getImgList(1);
      } else {
        this.getImgList(2);
      }
    } else {
      try {
        this.$message.error(result.data);
      } catch {
        this.$message.error(result.msg);
      }
    }
  });
},
submit(type) {
  console.log(this.imgList);
  console.log(this.imgLists);
  this.add(type);
}