文件上传
ElementUi
html
<div class="fj-add-btn ts02s" @click="dialogVisible = true">添加文件</div>
<el-dialog title="附件上传" :visible.sync="dialogVisible" width="30%" :modal="false" class="thisblack-bgc">
<el-upload class="upload-demo" :before-upload="beforeAvatarUpload" ref="upload" action="#"
:http-request="handleUpload" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
<div slot="trigger" size="small" type="primary" class="add-file-btn">+</div>
<div slot="tip" class="el-upload__tip">只能上传word、excal、pdf文件,且不超过5mb</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button size="small" round type="primary" @click="dialogVisible3 = false">确定</el-button>
<el-button size="small" round @click="cancelUpload(); dialogVisible3 = false">取 消</el-button>
</span>
</el-dialog>
data
data: () => ({
fileList: [],
dialogVisible:false,
})
methods
...mapActions('file', ['upload']),
async submitUpload() {
this.$refs.upload.submit();
if (this.fileList.length == 0) {
return
}
var formData = new window.FormData();
this.fileList.forEach(function (file) {
formData.append('file', file);
})
formData.append("type", 0)
const { code, message, data } = await this.upload(formData)
if (code === 200) {
ElementUI.Message.success('上传成功')
}
this.fileList = []
this.$refs.upload.clearFiles();
},
handleUpload(raw) {
this.fileList.push(raw.file);
},
beforeAvatarUpload(file) {
let pattern = /^.*(\.doc|\.docx|.xls|.xlsx|.pdf)$/
const isJPG = pattern.test(file.name);
const isLt5M = file.size / 1024 / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error('上传的文件只能是 Word、Excal和PDF !');
}
if (!isLt5M) {
this.$message.error('文件大小不能超过 5MB!');
}
return isJPG && isLt5M;
},
cancelUpload() {
this.fileList = []
this.$refs.upload.clearFiles();
},
handFileSuccess(file) {
this.fileList = []
this.$refs.upload.clearFiles();
},
handleRemove(file, fileList) {
this.fileList = fileList
},
axios
async upload(state, formData) {
return await axios({
url: '/file/upload',
method: 'POST',
data: formData
})
},
css
// 修改el-dialog样式
::v-deep .el-dialog__body {
padding: 10px 20px;
}
::v-deep .el-dialog__header {
padding: 20px 20px 0px;
}
// 文件上传按钮
.add-file-btn {
width: 30px;
height: 30px;
text-align: center;
font-size: 20px;
position: absolute;
bottom: 20px;
border: 1px dashed #409EFF;
}
// el-dialog背景失效替代
.thisblack-bgc {
background-color: #00000049;
}
SpringBoot
controller
@PostMapping("/file/upload")
public ResponseResult upload(@RequestParam(value = "file") MultipartFile[] files,
@RequestParam(value = "type")Integer type) throws IOException {
return fileService.upload(files, type);
}
serviceImpl
@Transactional(rollbackFor = Exception.class)
public ResponseResult upload(MultipartFile[] files, Integer type) throws IOException {
if (files.length == 0) {
throw new GlobalException(ResponseResultEnum.FILE_ERROR);
}
for (MultipartFile file : files) {
String filePath = "D:/Project/resources/static/file/";
File newFile = new File(filePath + file.getOriginalFilename());
if (!newFile.getParentFile().exists()) {
newFile.getParentFile().mkdirs();
}
file.transferTo(newFile);
}
}
application.yml
spring:
// 静态资源访问真实路径
web:
resources:
static-locations: file:D:/Project/resources/static/file
// 静态资源访问映射路径
mvc:
static-path-pattern: /resources/**