一个简易的图片与文件从同一个入口上传

效果图如下

template部分                                                                                                                                

    handleRemove(file, fileList) {console.log(file, fileList);this.fileList = fileList;},handleFileChange(file, fileList) {console.log("file", file, "fileList", fileList);this.fileList = fileList;},downloadFile(file) {if (file.raw) {// 生成文件的下载链接const url = URL.createObjectURL(file.raw);// 创建一个 <a> 标签const link = document.createElement("a");link.href = url;link.download = file.name; // 设置下载的文件名document.body.appendChild(link);link.click(); // 触发下载document.body.removeChild(link); // 移除 <a> 标签URL.revokeObjectURL(url); // 释放临时 URLthis.$message.success("文件下载成功");} else {this.$message.warning("文件不存在，无法下载");}},removeFile(file) {const index = this.fileList.indexOf(file);if (index !== -1) {this.fileList.splice(index, 1);this.$message.success("文件删除成功");}},

methods部分 

    handleFileChange(file, fileList) {console.log("file", file, "fileList", fileList);this.fileList = fileList;},downloadFile(file) {if (file.raw) {// 生成文件的下载链接const url = URL.createObjectURL(file.raw);// 创建一个 <a> 标签const link = document.createElement("a");link.href = url;link.download = file.name; // 设置下载的文件名document.body.appendChild(link);link.click(); // 触发下载document.body.removeChild(link); // 移除 <a> 标签URL.revokeObjectURL(url); // 释放临时 URLthis.$message.success("文件下载成功");} else {this.$message.warning("文件不存在，无法下载");}},removeFile(file) {const index = this.fileList.indexOf(file);if (index !== -1) {this.fileList.splice(index, 1);this.$message.success("文件删除成功");}},