若依文件上传upload加回显一体化组件

这个写法只适合页面只有一个上传需求 多个上传会出现bug；后续再优化吧…

<template>

  <div style="display: flex;flex-direction: row;align-items: center;">
    <div v-for="item in fileList">
      <div :style="{width: imageHeight+'px', height: imageHeight+'px',position:'relative',marginLeft:'10px'}"
           v-if="isPng(item)">
        <el-image :style="{width: imageHeight+'px', height: imageHeight+'px'}"
                  :src="`${baseAPI}${item}`" :preview-src-list="[`${baseAPI}${item}`]">
        </el-image>
        <i class="el-icon-circle-close fs16"
           style="color: indianred;top: -5px;right: -5px;position: absolute;cursor: pointer;"
           @click="deleteItem(item)"></i>
      </div>

      <div v-else
           :style="{width: imageHeight+'px', height: imageHeight+'px',position:'relative',marginLeft:'10px'}">
        <el-link :href="`${baseAPI}${item}`" :underline="false"
                 target="_blank">
          <span style="font-size: 12px;color:skyblue;width:80px;height: 80px;">{{
              '...' + item.substring(item.length - 10)
            }}</span>
        </el-link>

        <i class="el-icon-circle-close fs16"
           style="color: indianred;top: -5px;right: -5px;position: absolute;cursor: pointer;"
           @click="deleteItem(item)"></i>
      </div>

    </div>
    <el-button style="height: 28px;" class="ml10" v-if="showUploadBt" type="primary"
               size="mini" @click="choosePicA">
      选择文件
    </el-button>

    <el-upload
      v-show="false"
      class="upload-demo"
      name="picFile"
      :headers="headers"
      :action="uploadImgUrl"
      :on-preview="handlePreviewA"
      :on-remove="handleRemoveA"
      :on-success="handleSuccessA"
      :before-remove="beforeRemoveA"
      multiple
      :limit="1"
      :on-exceed="handleExceedA"
      :file-list="fileListO">
      <el-button slot="trigger" id="chooseClickA" size="small" ref="uploadBt" type="primary">选取文件</el-button>
    </el-upload>

  </div>

</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  name: "index",
  data() {
    return {
      uploadImgUrl: this.mBaseUploadUrl,
      fileListO: [],
      headers: {
        Authorization: "Bearer " + getToken()
      },
      baseAPI: process.env.VUE_APP_BASE_API,
    }
  },
  watch: {
    fileList(n, o) {
      console.log('watch')
      this.fileList = n;
    },
  },
  props: {
    //view choose
    showUploadBt: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: function () {
        return []
      }
    },
    imageHeight: {
      type: Number,
      default: 80
    }
  },
  methods: {
    handleRemoveA(file, fileList) {
      console.log(file, fileList);
    },
    handlePreviewA(file) {
      console.log(file);
    },
    handleSuccessA(response, file, fileList) {
      this.fileList.push(response)
      // 清空上传状态
      this.fileListO = []
    },
    handleExceedA(files, fileList) {
    	//可以忽略因为用不到每次只传一张图
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemoveA(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    choosePicA(e, type) {
      document.getElementById('chooseClickA').click();
    },
    //判断是不是图片
    isPng(str) {
      if (str) {
        var temp = {a: str}
        temp = temp.a.toLowerCase()
        return temp.indexOf('jpg') > -1 || temp.indexOf('png') > -1 || temp.indexOf('jpeg') > -1;
      }
      return false
    },
    deleteItem(item) {
      var idx = this.fileList.findIndex(itm => item == itm)
      if (idx > -1) this.fileList.splice(idx, 1);
      console.log(this.fileList, "SDFSD")
    },
  }
}
</script>

<style scoped>


</style>