Upload上传/自定义缩略图

实现效果

点击+，打开对话框选择本地图片文件，选择后上传到服务器，提示成功，同时图片展示在可视区域，

。

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: ';,  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}

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