zdppy_api+vue3+antd实现批量上传文件的功能

server/2024/11/14 3:03:55/

前端代码版本1

在这个版本中,能够实现文件上传以后,通过文件列表的链接点击以后进行回显。

但是有个问题,那就是文件的状态一直是加载中。

<template><a-uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76":multiple="true":file-list="fileList"@change="handleChange"><a-button><upload-outlined></upload-outlined>Upload</a-button></a-upload>
</template>
<script setup>
import {ref} from 'vue';
import {UploadOutlined} from "@ant-design/icons-vue";const fileList = ref([{uid: '-1',name: '1.jpg',status: 'done',url: 'http://127.0.0.1:8888/download/1.jpg',},
]);const handleChange = info => {let resFileList = [...info.fileList];// 1. Limit the number of uploaded files//    Only to show two recent uploaded files, and old ones will be replaced by the newresFileList = resFileList.slice(-2);// 2. read from response and show file linkresFileList = resFileList.map(file => {if (file.response) {// Component will show file.url as linkfile.url = file.response.url;}return file;});fileList.value = resFileList;
};
</script>

前端代码版本2

这个版本中,简化了前端的代码。

在文件上传成功以后,我们提取上传文件的唯一标识,追加到了要回显的文件列表中。

<template><a-upload:multiple="true":file-list="fileList":customRequest="customRequest"><a-button><upload-outlined></upload-outlined>Upload</a-button></a-upload>
</template>
<script setup>
import {ref} from 'vue';
import {UploadOutlined} from "@ant-design/icons-vue";
import axios from "axios";const fileList = ref([{uid: '-1',name: '1.jpg',status: 'done',url: 'http://127.0.0.1:8888/download/1.jpg',},
]);const customRequest = (option) => {const formData = new FormData();const fileUrl = "http://127.0.0.1:8888/upload";formData.append('file[]', option.file);axios.postForm(fileUrl, {file: option.file,}).then(res => {console.log(res)const data = res.data.dataconsole.log("data xxxxxxxxxx", data)fileList.value.push({uid: data.uuid,name: data.file_name,status: 'done',url: 'http://127.0.0.1:8888/download/' + data.file_name,})})
}
</script>

http://www.ppmy.cn/server/53649.html

相关文章

MFC扩展库BCGControlBar Pro v35.0新版亮点 - 工具栏、菜单全新升级

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了&#xff0c;这个版本改进类Visual Studio 2022的视觉主题、增强对多个…

笔记本电脑屏幕模糊?6招恢复屏幕清晰!

在数字化时代的浪潮中&#xff0c;笔记本电脑已成为我们生活、学习和工作中不可或缺的一部分。然而&#xff0c;当那曾经清晰明亮的屏幕逐渐变得模糊不清时&#xff0c;无疑给我们的使用体验蒙上了一层阴影。屏幕模糊不仅影响视觉舒适度&#xff0c;更可能对我们的工作效率和眼…

魔行观察-烤匠麻辣烤鱼-开关店监测-时间段:2011年1月 至 2024年6月

今日监测对象&#xff1a;烤匠麻辣烤鱼&#xff0c;监测时间段&#xff1a;2011年1月 至 2024年6月 本文用到数据源获取地址 魔行观察http://www.wmomo.com/ 品牌介绍&#xff1a; 2013年&#xff0c;第一家烤匠在成都蓝色加勒比广场开业&#xff0c;随后几年成都国金中心店…

神经网络实战2-损失函数和反向传播

其实就是通过求偏导的方式&#xff0c;求出各个权重大小 loss函数是找最小值的&#xff0c;要求导&#xff0c;在计算机里面计算导数是倒着来的&#xff0c;所以叫反向传播。 import torch from torch.nn import L1Lossinputstorch.tensor([1,2,3],dtypetorch.float32) targe…

公爹公婆出首付买房,离婚的儿媳妇能分吗?

小两口结婚后为了更好地生活打算购房&#xff0c;男方父母帮助支付首付款&#xff0c;后房屋登记在夫妻名下。后两人因感情不和打算离婚&#xff0c;女方要求按照房屋的现行价值进行分割&#xff0c;能否得到支持&#xff1f;近日&#xff0c;江苏省南通市中级人民法院对这起离…

Python逻辑控制语句 之 判断语句--if语句的基本结构

1.程序执行的三大流程 顺序 分支&#xff08;判断&#xff09; 循环 2.if 语句的介绍 单独的 if 语句,就是 “如果 条件成⽴,做什么事” 3.if 语句的语法 if 判断条件: 判断条件成立&#xff0c;执行的代码…

全国今日油价查询-全国今日油价查询接口-API接口

关于油价的信息&#xff0c;以下是详细的分点表示和归纳&#xff1a; 最新油价调整&#xff1a; 时间&#xff1a;2024年6月28日0时 调整内容&#xff1a;汽油价格上调210元/吨&#xff0c;柴油价格上调200元/吨。 涨幅&#xff1a;加油站油价上涨0.16元/升-0.20元/升。 具体油…

49、基于归一化感知器的输入向量分类(matlab)

1、基于归一化感知器的输入向量分类的原理及流程 归一化感知器是一种分类算法&#xff0c;其原理基于感知器算法&#xff0c;但是在输入向量上进行了归一化处理&#xff0c;以提高算法的性能和稳定性。 流程如下&#xff1a; 输入向量归一化&#xff1a;对每个输入向量进行归…