zhzf/client/src/views/common/MultiplePicture.vue

<template>
  <div class="pic-div">
    <el-upload v-if="mergeParameters.mode !== 'detail'"
               :action="mergeParameters.url"
               list-type="picture-card"
               :multiple="mergeParameters.multiple"
               :headers="mergeParameters.headers"
               :auto-upload="mergeParameters.autoUpload"
               :limit="mergeParameters.limit"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               :on-change="handleChange"
               :on-success="onSuccess"
               :on-error="onError"
               :on-exceed="handleExceed"
               :file-list="pictureList"
               accept="image/gif,image/jpg,image/jpeg,image/png,image/GIF,image/JPG">
      <el-icon>
        <Plus/>
      </el-icon>
    </el-upload>
    <el-upload v-if="mergeParameters.mode === 'detail'"
               class="noUpOnly"
               action="#"
               list-type="picture-card"
               :auto-upload="mergeParameters.autoUpload"
               :on-preview="handlePictureCardPreview"
               :file-list="pictureList">
      <template #file="{ file }">
        <img style="width: 148px; height: 148px;" class="el-upload-list__item-thumbnail" :src="file.url">
        <div v-if="file.name">
          <el-tooltip effect="dark" :content="file.name">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <el-icon><zoom-in/></el-icon>
            </span>
            <span class="el-upload-list__item-delete" @click="handleDownload(file)">
              <el-icon><Download/></el-icon>
            </span>
          </span>
          </el-tooltip>
        </div>
        <div v-else>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <el-icon><zoom-in/></el-icon>
            </span>
            <span class="el-upload-list__item-delete" @click="handleDownload(file)">
              <el-icon><Download/></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <PictureView ref="pictureViewRef"/>
  </div>
</template>

<script setup>

import {ElMessage} from "element-plus"
import {defineEmits, defineProps, reactive, toRefs, ref, watch, toRaw} from "vue"
import {merge} from "lodash"
import PictureView from "@pages/common/PictureView.vue"
import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'
import {useUserStore} from "@/stores/modules/user.js"

const userStore = useUserStore()
const props = defineProps({
  parameters: {
    type: Object,
    default: () => ({})
  },
  formData: {
    type: Object,
    default: () => ({})
  }
})

const state = reactive({
  dialogImageUrl: '',
  dialogVisible: false,
  pictureList: [],
  disabled: false,
  mpNum: 0,
  modifyFileList: []
})
const pictureViewRef = ref(null)

const {
  dialogImageUrl,
  dialogVisible,
  pictureList,
  disabled
} = toRefs(state)

const defaultParameters = {
  mode: 'add',
  isAddCallback: true,
  isModifyCallback: true,
  multiple: true,
  autoUpload: false,
  limit: 5,
  limitSize: 2,
  industryCategory: 'PUB',
  displayMsg: false,
  specialTreatment: false,
  backPic: false,
  headers: {'industry-category': 'PUB', 'Authorization': `Bearer ${userStore.token}`},
  url: '/api/uploads'
}

const mergeParameters = reactive(merge({}, defaultParameters, props.parameters))
const emit = defineEmits(['on-remove', 'on-success', 'del-picture-id', 'on-change', 'on-pic-view', 'on-remove'])

function onSuccess(res, file, fileList) {
  if (mergeParameters.autoUpload) {
    emit('on-success', res.data, file, props.formData)
  } else
    emit('on-success', fileList)
}

function onError(res) {
  ElMessage.error('上传失败：', res)
}

function handleChange(file, fileList) {
  file.status = 'success'
  emit('on-change', file, fileList, props.formData)
  if(!mergeParameters.autoUpload)
    pictureList.value = fileList
}

function handleRemove(file, fileList) { // 这里的file.id是已经存在服务器中的文件
  pictureList.value = fileList
  if (file.id) {
    emit('del-picture', file, props.formData)
  }
  emit('on-remove', file, props.formData)
}

function handlePictureCardPreview(file) {
  if (mergeParameters.backPic)
    emit('on-pic-view', file.url, pictureList.value.map(o => o.url))
  else
    pictureViewRef.value.viewPicture(file.url, pictureList.value.map(o => o.url))
}

function handleDownload(file) { // 下载文件
  if (file && file.url) {
    window.open(file.url)
  }
}

function handleExceed(files, fileList) {
  ElMessage.warning(`当前限制选择 ${mergeParameters.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}

pictureList.value = props.formData?.urls || []

</script>
<style>

.pic-div {
  .el-upload-list__item-thumbnail, .el-upload-list__item-actions, .el-upload-list__item, .el-upload--picture-card {
    object-fit: initial;
  }
}

.noUpOnly div.el-upload--picture-card {
  display: none;
}

</style>