element-ui文件上传下载组件：
具备上传、下载和删除功能。
不自动上传，附件选择后只将文件加入待上传列表，点击确认上传按钮后上传到后台服务器，已上传的文件通过表格的形式展示在上方表格中。
删除和上传权限可配置。
效果如下：
代码如下：文章来源：https://www.toymoban.com/news/detail-527313.html
/*
* @Description: element-ui文件上传下载组件（不自动上传）
* @Author: yiwenli
* @Date: 2023-03-30
*/
Vue.component('fileUpload', {
name: 'fileUpload',
template: /* html */ `<div>
<div>已上传文件列表</div>
<el-table :data="uploadedFileList" :show-header="false">
<el-table-column prop="fileName" width="300" align="center"></el-table-column>
<el-table-column prop="operate" width="200" align="center">
<template slot-scope="scope">
<el-button class="el-icon-download" type="text" @click="fileDownload(scope.row)">下载</el-button>
<el-button class="el-icon-delete" type="text" @click="fileDeleteInServer(scope.row)" v-if="deleteAble">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item v-if="uploadAble">
<el-upload
action="#"
:auto-upload="false"
:multiple="true"
:file-list="toUploadFileList"
:on-change="fileChange"
:on-remove="fileRemove"
>
<el-button slot="trigger" size="small" type="primary">附件选择</el-button>
<el-button size="small" plain @click="fileUpload">确认上传</el-button>
</el-upload>
</el-form-item>
</div>`,
props: {
// 原始文件数据
fileList: {
type: Array,
required: true,
default: () => [],
},
// 上传功能是否可用
uploadAble: {
type: Boolean,
required: false,
default: true,
},
// 删除功能是否可用
deleteAble: {
type: Boolean,
required: false,
default: true,
},
},
data() {
return {
// 已上传文件列表
uploadedFileList: [],
// 待上传文件列表
toUploadFileList: [],
};
},
computed: {
// 上传路径
uploadUrl() {
return requestUrlBase('/file/fileUpload');
},
// 删除路径
deleteUrl() {
return requestUrlBase('/file/deleteFile');
},
// 下载路径
downloadUrl() {
return requestUrlBase('/file/downLoadFile');
},
},
watch: {
uploadedFileList() {
this.$emit('update:fileList', this.uploadedFileList);
},
fileList() {
this.uploadedFileList = this.fileList;
},
},
created() {
this.uploadedFileList = this.fileList;
},
methods: {
/**
* 文件上传
*/
fileUpload() {
if (this.toUploadFileList.length === 0) {
this.$message.error('请先选择至少1个文件再上传');
return;
}
let formData = new FormData();
this.toUploadFileList.forEach((item) => {
formData.append('file', item.raw);
});
$http({
url: this.uploadUrl,
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' },
})
.then(({ data }) => {
// 1、更新已上传文件列表
this.uploadedFileList = this.uploadedFileList.concat(data);
// 2、更新待上传文件列表
let returnFileMap = new Map(data.map((value) => [value.fileName, value.fileId]));
this.toUploadFileList = this.toUploadFileList
.filter((item) => !returnFileMap.has(item.name))
.map((item) => {
item.status = 'error';
return item;
});
this.$message.success('附件上传完成');
})
.catch((e) => {
this.$message.error(e.message || '附件上传失败');
});
},
/**
* 文件修改
* @param {*} file 当前操作文件对象
* @param {*} fileList 文件列表
*/
fileChange(file, fileList) {
this.toUploadFileList = fileList;
},
/**
* 文件删除
* @param {Object} file 当前操作文件对象
* @param {Array} fileList 文件列表
*/
fileRemove(file, fileList) {
this.toUploadFileList = fileList;
},
/**
* 文件从服务器端删除
* @param {Object} file 文件对象
*/
fileDeleteInServer(file) {
this.$confirm('确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
$http({
url: this.deleteUrl,
method: 'get',
params: requestParam(file, 'get'),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(() => {
this.$message.success('文件删除成功');
this.uploadedFileList.splice(
this.uploadedFileList.findIndex((item) => item.fileId === file.fileId),
1
);
})
.catch((e) => {
this.$message.error(e.message || '文件删除失败');
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
});
});
},
/**
* 文件下载
* @param {Object} file 文件对象
*/
fileDownload(file) {
let params = {
fileId: file.fileId,
fileName: file.fileName,
userOrgId: Session.get('userInfo').orgId,
};
this.postDownloadFile(params, this.downloadUrl);
},
/**
* 以post方式传参并下载文件
* @param {Object} params 请求需要的参数
* @param {String} url 请求url地址
*/
postDownloadFile(params, url) {
// params是post请求需要的参数，url是请求url地址
const form = document.createElement('form');
form.style.display = 'none';
form.action = url;
form.method = 'post';
document.body.appendChild(form);
// 动态创建input并给value赋值
for (const key in params) {
const input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = params[key];
form.appendChild(input);
}
form.submit();
form.remove();
},
},
});
<file-upload
:file-list.sync="fileList"
:upload-able="true"
:delete-able="true"
></file-upload>
后端：文章来源地址https://www.toymoban.com/news/detail-527313.html
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.io.IoUtil;
import cn.hutool.core.io.file.FileNameUtil;
import cn.hutool.core.util.ObjectUtil;
import cn.hutool.crypto.digest.DigestUtil;
import com.ieslab.model.Result;
import com.ieslab.pfjawebsvr.modules.file.domain.FileVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.core.io.Resource;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.*;
/**
* @author
* @ClassName FileOpController
* @Description 附件上传下载
* @date 2022年03月16日 14:20
*/
@Api(tags = "附件上传下载")
@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {
@ApiOperation("附件上传")
@PostMapping("/fileUpload")
public Result upLoadFile(@RequestHeader("userOrgId") String userOrgId, @RequestParam("file") MultipartFile[] files) {
if (files.length == 0) {
return Result.error("文件为空");
}
if (ObjectUtil.isNull(userOrgId)) {
userOrgId = "null";
}
List<FileVO> fileVOList = new ArrayList<>();
try {
String basePath = System.getenv("PFJA_HOME") + "/file/" + userOrgId + "/";
for (MultipartFile multipartFile : files) {
String fileName = multipartFile.getOriginalFilename();
//生成文件唯一has256值
String hashValue = DigestUtil.sha256Hex(multipartFile.getBytes());
String filePath = basePath + FileNameUtil.getPrefix(fileName) + "&" + hashValue + "." + FileNameUtil.getSuffix(fileName);
File file = FileUtil.file(filePath);
//实现文件存储
FileUtil.writeBytes(multipartFile.getBytes(), file);
fileVOList.add(new FileVO(hashValue, fileName));
}
return Result.ok(fileVOList);
} catch (Exception e) {
return Result.error(e.getMessage());
}
}
@ApiOperation("附件下载")
@PostMapping(value = "/downLoadFile")
public void downLoadFile(@RequestParam("userOrgId") String userOrgId, @RequestParam("fileId") String fileId, @RequestParam("fileName") String fileName, HttpServletResponse response) {
if (ObjectUtil.isNull(userOrgId)) {
userOrgId = "null";
}
String basePath = System.getenv("PFJA_HOME") + "/file/" + userOrgId + "/";
try {
// 创建输出流对象
ServletOutputStream outputStream = response.getOutputStream();
//以字节数组的形式读取文件
String filePath = basePath + FileNameUtil.getPrefix(fileName) + "&" + fileId + "." + FileNameUtil.getSuffix(fileName);
byte[] bytes = FileUtil.readBytes(filePath);
// 设置返回内容格式
response.setContentType("application/octet-stream");
// 把文件名按UTF-8取出并按ISO8859-1编码，保证弹出窗口中的文件名中文不乱码
// 中文不要太多，最多支持17个中文，因为header有150个字节限制。
// 这一步一定要在读取文件之后进行，否则文件名会乱码，找不到文件
fileName = new String(fileName.getBytes("UTF-8"), "UTF-8");
// 设置下载弹窗的文件名和格式（文件名要包括名字和文件格式）
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
// 返回数据到输出流对象中
outputStream.write(bytes);
// 关闭流对象
IoUtil.close(outputStream);
} catch (Exception e) {
Result.error(e.getMessage());
}
}
@ApiOperation("附件删除")
@GetMapping("/deleteFile")
public Result deleteFile(@RequestHeader("userOrgId") String userOrgId, @RequestParam("fileId") String fileId, @RequestParam("fileName") String fileName) {
String basePath = System.getenv("PFJA_HOME") + "/file/" + userOrgId + "/";
String filePath = basePath + FileNameUtil.getPrefix(fileName) + "&" + fileId + "." + FileNameUtil.getSuffix(fileName);
File file = FileUtil.file(filePath);
if (file.exists()) {
boolean delete = file.delete();
return Result.ok(delete);
} else {
return Result.ok(true);
}
}
}
到了这里，关于element-ui文件上传下载组件+后台对应接口的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
