Upload上传/自定义缩略图

实现效果

点击+，打开对话框选择本地图片文件，选择后上传到服务器，提示成功，同时图片展示在可视区域，
https://element-plus.gitee.io/zh-CN/component/upload.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%A9%E7%95%A5%E5%9B%BE。

VUE3代码

<template>
  <div class="elementDemo07">
    <el-upload 
        :action="stateData.action" 
        :on-success = "handleUploadSuccess"
        list-type="picture-card" :auto-upload="true"
        :file-list="stateData.fileList"
      >
      <el-icon><Plus /></el-icon>
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <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
              v-if="!stateData.disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <el-icon><Download /></el-icon>
            </span>
            <span
              v-if="!stateData.disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
    <el-dialog v-model="stateData.dialogVisible">
      <img width="100%" :src="stateData.dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 交互式数据
const stateData = reactive({
  action: 'http://127.0.0.1:3010/app/support/communal/file/upload/formUpload',
  fileList: [],
  dialogImageUrl: '',
  dialogVisible: false,
  disabled: false,
});

//
const handleUploadSuccess = (file) =>{
  ElMessage.success("上传成功！");
}

// 预览
const handlePictureCardPreview = (file) =>{
  const { data } = file.response;
  console.log("这里放大预览", data);
  console.log("这里访问地址", data.accessAddress);
  stateData.dialogImageUrl = file.url;
  stateData.dialogVisible = true;
}

// 下载
const handleDownload = (file) =>{
  console.log("这里下载文件", file);
}

// 移除
const handleRemove = (file) =>{
  console.log("这里远程删除", file);
  let currentFileList = [];
  stateData.fileList.forEach((item,index)=>{
    if(item.uid!=file.uid){
      currentFileList.push(item);
    }
  });
  stateData.fileList=currentFileList;
}

</script>

<style lang="scss" scoped>
.elementDemo07{
  margin: 0 auto;
  width:600px;
}
</style>

HTTP上传协议：

上传后返回数据格式：

{
  "code": "SUCCESS",
  "msg": null,
  "data": {
    "id": 1651596675304,
    "accessId": "1651596675304.png",
    "modular": "communal",
    "model": "common",
    "name": "EHVrg7mwugJUreBgJwtMQYUyPoqLrU",
    "originalFilename": "封底.png",
    "type": "image/png",
    "file": null,
    "size": 298603,
    "suffix": "png",
    "status": 0,
    "storageAddress": "/communal/common/EHVrg7mwugJUreBgJwtMQYUyPoqLrU/1651596675304.png",
    "accessAddress": "/communal/common/EHVrg7mwugJUreBgJwtMQYUyPoqLrU/1651596675304.png",
    "createUser": null,
    "createTime": null
  },
  "message": null
}

SpringBoot后台支持

参考：Vue3，ElementPlus，Upload / 通过点击上传（el-upload），后台