element-ui实现图片上传，以图搜图接口对接

今天做项目的时候，拿到了一个接口文档，如下:

哎，一开始就不会上传图片怎么办呢，想办法干啊！最后整理出来了上传图片的方法，用element-uid upload方法，直接上代码；

<div class="image_search">
          <el-upload
            :headers="headerObj"
            :before-upload="handleBeforeUpload"
            list-type="picture"
            show-file-list="false"
          >
            <el-button title="Search by image " type="default" icon="el-icon-camera"></el-button>
          </el-upload>
        </div>

data区域:

headerObj: {},

computed区域:

   handleBeforeUpload(file) {
      console.log(file);
      this.searchInput = file.name;
      this.file = file;
      this.$router.push({
        name: "ImgSearchResults",
        params: {
          file: this.file,
        },
      });
    }

请求成功跳转到新页面:

<template>
  <div  element-loading-text="please waiting..."
   v-loading="loading">
    <div class="images">
      <div  v-for="(item, index) in images" :key="index" class="img">
        <img :src="`http://localhost:8080/wes/${item.path}`" alt="" />
      </div>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImgSearchResults",
  data() {
    return {
      loading: false,
      images: [],
      file: null,
      pn: 0,
      rn: 12,
      total: 120,
    };
  },
  created() {
    this.init();
    this.query();
  },
  methods: {
    init() {
      this.file = this.$route.params.file;
    },
    pageChange(page) {
      this.pn = this.rn * (page - 1);
      this.query();
      if(this.pn===100){
        this.$message.console.error("已经到底啦");
      }
    },
    async query() {
      let fileData = new FormData();
      fileData.append("file", this.file);
      fileData.append("pn", this.pn);
      fileData.append("rn", this.rn);
      this.loading = true;
      const { data: res } = await this.$http.post("picture/search", fileData);
      this.loading = false;
      this.images = res.data.briefs;
    },
  },
};
</script>

<style scoped lang="less">
.images {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .img {
    width: 280px;
    height: 210px;
    margin-bottom: 10px;;
    padding-top: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.page {
  text-align: center;
  margin-top: 20px;
}
</style>

最终效果如下:

最后就是成功啦！！代码片段大家按需取要，可以私信我讨论交流，注意是formdata传值哈！！祝大家code happy