图片文件上传（上面一篇是预览）

图片上传和预览是一起的，分别写了两个组件（上传、预览），在上传中调用预览，因放一起有点多故分开写了

写上传组件attach

<template>
<div>
  <div class="pic-list" v-if="temp.fileList.length>0">
    <p style="color:tomato;">已上传文件：</p>
      <draggable :list="temp.fileList" class="all-img">
        <div v-for="(element, index) in temp.fileList" :key="index" class="img-list">  
        <span style="width:124px;padding-right:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;"> {{element.name}} </span>
          <div class="jiao" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave(index)" >
             <i class="el-icon-check" v-if="index!=isIndex" @click="removeFile(element)" style="cursor:pointer;color:#fff;position: absolute;top: -27px;left: -15px;"></i>
             <i v-if="index==isIndex" class="el-icon-close" @click="removeFile(element)" style="cursor:pointer;color:#fff;position: absolute;top: -27px;left: -15px;"></i>
          </div>
          <img class="image-item" :src="element.url" @click="pictureView" > 
        </div>
      </draggable>
    </div>
  <div class="attach1">
    <div v-if="temp.fileList.length>0" style="text-align:center;margin-top:50px;">
      <a @click="toUpload" style="padding:10px 20px;border-radius:5px;color:#fff;background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);">继续上传</a>
    </div>
      <div class="attach" v-if="temp.fileList.length==0" style="font-family:'幼圆'">
        <div class="upload">您尚未上传此文件原件，
          <a @click="toUpload">去上传</a>
        </div>
        <div class="note">点击 “去上传” ，即弹出此文件上传窗口</div>
      </div>
     <el-dialog title="数据上传" :visible.sync="dialogVisible" width="70%" top="5vh" v-dialogDrag custom-class="viewDialog">
      <div class="top-btn" style="display:flex;justify-content: space-around;align-items:center;">
        <el-upload action="api/file/upload" :multiple="true" :show-file-list="false" :on-success="handleSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
        <p style="color:tomato;font-size:16px">拖动可交换图片文件的位置（点击图片预览）</p>
      <draggable :list="temp.fileList" class="all-img">
        <div v-for="(element, index) in temp.fileList" :key="index" class="img-list">  
          <span style="width:124px;padding-right:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;"> {{element.name}} </span>
          <div class="jiao" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave(index)" >
             <i class="el-icon-check" v-if="index!=isIndex" @click="removeFile(element)" style="cursor:pointer;color:#fff;position: absolute;top: -27px;left: -15px;"></i>
             <i v-if="index==isIndex" class="el-icon-close" @click="removeFile(element)" style="cursor:pointer;color:#fff;position: absolute;top: -27px;left: -15px;"></i>
          </div>
          <img class="image-item" :src="element.url" @click="pictureView" > 
        </div>
      </draggable>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveData" size="mini">提 交</el-button>
      </span>
    </el-dialog> 
    <el-dialog title="预览" :visible.sync="visible" width="90%" custom-class="imgDialog" :fullscreen = "true">
      <vue-picture-viewer :imgData="temp.fileList" :switch="true"></vue-picture-viewer>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import { createUpload, updateUpload, fetchUploadList } from "@/api/upload.js";
import vuePictureViewer from "@/components/vuePictureViewer";
import myPicture from "@/components/myPicture/index";
import { getAllResult } from "@/utils/asyncData";
import { getToday, formatToCNDate } from "@/utils/date";
export default {
  name: "fujian",
  data() {
    return {
      isIndex: null,
      picShow: false,
      visible: false,
      photoVisible: false,
      dialogVisible: false,
      show: false,
      temp: {
        fileList: [],
        id: "",
        deleteId: []
      }
    };
  },
  components: {
    Draggable,
    vuePictureViewer,
    myPicture
  },
  props: {
    id: {
      type: [String, Number],
      default: ""
    },
  },
  created() {
    this.click();
  },
  methods: {
    //获取数据
    click() {
      fetchUploadList({
        id: this.id,
      }).then(data => {
        if (data.length > 0) {
          data = data[0].uploadFile;
          data.map(item => {
            let temp = {
              id: item.id,
              name: item.name,
              order: item.order,
              url: item.src
            };
            this.temp.fileList.push(temp);
          });
        }
      });
    },
    mouseEnter(tar) {
      this.isIndex = tar;
    },
    mouseLeave(tar) {
      this.isIndex = null;
    },
    toUpload() {
      this.dialogVisible = true;
      this.temp.deleteId = [];
    },
    handlePic() {
      this.photoVisible = true;
    },
    pictureView() {
      this.visible = true;
    },
    removeFile(element) {
      this.temp.fileList = this.temp.fileList.filter(
        item => item.uid !== element.uid
      );
      this.temp.deleteId.push(element.uid);
    },
    handleSuccess(response, file, fileList) {
      let obj = {
        uid: file.uid,
        name: file.name,
        url:
          "api/uploadsfile/" +
          file.response.returnData.list[0].fileRealResistPath
      };
      this.temp.fileList.push(obj);
    },
    saveData() {
      let data = {
        id: this.temp.id,
        name: this.name,
        uploadFileDeleteId: this.temp.deleteId,
        upload_file: this.temp.fileList.map((item, index) => {
          return {
            id: item.uid > 10000 ? 0 : item.uid,
            src: item.url,
            name: item.name,
            order: index
          };
        })
      };
      if (data.id) {
        updateUpload(data).then(data => {
          this.dialogVisible = false;
        });
      } else {
        createUpload(data).then(data => {
          this.dialogVisible = false;
        });
      }
    }
  }
};
</script>
<style lang="scss" >
td.el-table_1_column_2.is-center {
  text-align: left;
}
.imgDialog {
  .el-dialog__header {
    background-color: #fff;
    span {
      color: #000;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #000;
    }
  }
  .el-dialog__body {
    padding: 0;
    padding-bottom: 50px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.viewDialog {
  .el-dialog__body {
    min-height: 417px;
  }
}
</style>
<style lang="scss" scoped>
.all-img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.img-list {
  width: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  margin: 5px 10px;
  position: relative;
  img {
    cursor: pointer;
    width: 124px;
    height: 175px;
    margin-top: 5px;
  }
  .jiao {
    width: 0;
    height: 0;
    right: 0;
    top: -41px;
    border-width: 30px 0 0 30px;
    border-style: solid;
    border-color: #6c6 transparent transparent transparent;
    margin: 40px auto;
    position: absolute;
  }
}
.title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 20px;
  border-bottom: 1px dashed #666;
}
.view-list {
  cursor: pointer;
  :hover {
    color: red;
  }
}
.upload-line {
  border-bottom: 1px #000 dashed;
  padding: 10px;
  margin-bottom: 5px;
  position: relative;
  .image {
    width: 124px;
    height: 175.4px;
    border: 1px solid #777;
    cursor: pointer;
  }
  .upload-btn {
    position: absolute;
    top: 40%;
    left: 5%;
    z-index: 9999;
  }
}
.dialog-footer {
  position: relative;
  bottom: 0;
}
.attach {
  margin: 30px auto;
  border: 1px #000 dashed;
  width: 900px;
  height: 170px;
  .upload {
    text-align: center;
    margin: 30px;
    font-size: 20px;
    a {
      margin: 3px;
      padding: 0 5px;
      display: inline-block;
      border-bottom: 1px blue solid;
      color: blue;
    }
  }
  .note {
    text-align: center;
    margin: 30px;
    font-size: 20px;
    font-weight: 500;
  }
}
</style>

引用上传组件

<attach :id="id"></attach>