vue 文件上传组件封装

增加图片缩略图以及Word、txt文档在线预览

文件上传组件完整代码

<template><div><el-uploadclass="upload-demo":action="upload.url":headers="upload.headers":on-change="handleUploadChange":on-success="handleUploadSuccess":on-remove="handleUploadRemove":on-preview="handleUploadPreview":before-upload="beforeUpload":file-list="upload.fileList":disabled="disabled" ><el-button size="small" type="primary">点击上传</el-button></el-upload><el-dialog:visible.sync="imgDialogVisible"append-to-bodytitle="预览"width="800"><img:src="dialogImageUrl"style="display: block; max-width: 100%; margin: 0 auto"/></el-dialog></div>
</template><script>
import { getFileUrl } from '@/api/system/file'
import { getToken } from '@/utils/auth'export default {name: 'UploadCommon',props: {outFileList: {type: Array,default: () => []},disabled: {type: Boolean,default: () => false},finishUploadChange: {type: Function},},watch: {outFileList(val) {this.fileList = valthis.initUpload()}},data() {return {// 文件上传配置upload: {// 是否禁用上传isUploading: false,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/common/uploadGetId",// 上传的文件列表fileList: []},form: {layoutFileIds: null,layoutFileIdsArr: []},fileList: [],dialogImageUrl: "",imgDialogVisible: false}},methods: {handleUploadChange(file, fileList) {this.fileList = fileList.slice(-3);},handleUploadRemove(file, fileList, event) {console.log(file)this.form.layoutFileIdsArr.splice(this.form.layoutFileIdsArr.indexOf(file.id), 1)this.form.layoutFileIds = this.form.layoutFileIdsArr.join(",")this.finishUploadChange(this.form.layoutFileIds)},handleUploadSuccess(response, file, fileList) {this.form.layoutFileIdsArr.push(response.id)this.form.layoutFileIds = this.form.layoutFileIdsArr.join(",").toString()this.finishUploadChange(this.form.layoutFileIds);},resetFileList() {this.fileList = []},beforeUpload(file) {console.log(file)let isJPG = file.type === 'image/jpeg';let isTxt = file.type === 'text/plain';let isWord = ( file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'|| file.type === 'application/msword' );let isPdf = file.type === 'application/pdf';// const isLt2M = file.size / 1024 / 1024 < 2;if (! (isJPG || isTxt || isWord || isPdf)) {this.$message.error('上传文件只能是 JPG、TXT、Word、PDF 格式!');}// if (!isLt2M) {//   this.$message.error('上传头像图片大小不能超过 2MB!');// }return isJPG || isTxt || isWord || isPdf;},handleUploadPreview(file) {let id = file.id ? file.id : file.response.idgetFileUrl(id).then(response => {let fileType = response.file.fileTypeif (fileType === 'pdf' || fileType === 'txt') {window.open(response.file.url)} else if (fileType === 'docx' || fileType === 'doc') {// window.location.href = './wordPreview?id=' + id;window.open('/backstage/emergency/wordPreview?id=' + id)} else if (fileType === 'jpg') {this.dialogImageUrl = response.file.urlthis.imgDialogVisible = true}})},initUpload() {this.fileList = this.outFileListthis.upload.fileList = this.fileListthis.form.layoutFileIdsArr = []for (let i=0; i<this.fileList.length; i++) {this.fileList[i].name = this.fileList[i].fileName + "." + this.fileList[i].fileTypethis.fileList[i].size = this.fileList[i].fileSizethis.form.layoutFileIdsArr.push(this.fileList[i].id)}this.form.layoutFileIds = this.form.layoutFileIdsArr.join(",")console.log(this.fileList)}},created() {this.initUpload()}
}
</script><style scoped></style>

文档在线预览组件完整代码，此处使用 mammoth 作为word文档预览插件

<template><div class="word-wrap"><div id="wordView" v-html="wordText" /></div>
</template><script>
// docx文档预览(只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等)
import mammoth from "mammoth";
import { getFileUrl } from '@/api/system/file'
export default {name: "EnterpriseWordPreview",data() {return {id: Number,wordText: "",wordURL: ''//文件地址};},created() {this.getWord();this.getWordText();},methods: {getWord() {let _this = thisthis.id = this.$route.query.idgetFileUrl(this.id).then(response => {let fileType = response.file.fileTypeif (fileType === 'docx' || fileType === 'doc') {// window.location.href = './wordPreview?id=' + id;// console.log(response.file.fileName + "." + fileType)_this.wordURL = response.file.url_this.getWordText()} else {_this.wordText = "当前文档格式不正确"}})},getWordText() {let xhr = new XMLHttpRequest();xhr.open("get", this.wordURL, true);xhr.responseType = "arraybuffer";xhr.onload = () => {if (xhr.status === 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {this.$nextTick(() => {this.wordText = resultObject.value;});});}};xhr.send();}},
};
</script><style>
.word-wrap {padding: 15px;}
.word-wrap img {width: 100%;
}
</style>

父组件中用法

<el-form-item label="相关附件：" prop="hazardousRegeditFileId"><upload-common :disabled="disabled":finish-upload-change="finishUploadChange":out-file-list="fileList" ></upload-common>
</el-form-item>

finishUploadChange(ids) {this.form.layoutFileIds = ids},

后端文件上传Java代码

@ApiOperation("通用上传请求返回文件表id")@ApiImplicitParam(name = "file", value = "文件流", dataType = "MultipartFile")@PostMapping("/common/uploadGetId")public AjaxResult uploadGetId(MultipartFile file) {try {// 上传文件路径String filePath = KingTopConfig.getUploadPath();// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String realName = file.getOriginalFilename().substring(0, file.getOriginalFilename().indexOf("."));String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("fileName", realName);ajax.put("url", url);String localFilePath = filePath + fileName.substring(fileName.indexOf("/upload")+7);// 存储到文件表SysFile sysFile = new SysFile();// 这不懂干什么用的，但是是必填，随便填个0sysFile.setTableId(0l);sysFile.setDataId(0l);sysFile.setMark(IdUtils.simpleUUID());sysFile.setUserId(SecurityUtils.getUserId());sysFile.setUserName(SecurityUtils.getUsername());sysFile.setUploadTime(new Date());sysFile.setUrl(url);sysFile.setFileSize(file.getSize());sysFile.setFileName(realName);sysFile.setFilePath(localFilePath);sysFile.setFileType(url.substring(url.lastIndexOf(".")+1));sysFile.setFileMd5(SecureUtil.md5(new File(localFilePath)));sysFile.setStatus(0l);ajax.put("id", sysFileService.insertSysFile(sysFile));return ajax;} catch (Exception e) {return AjaxResult.error(e.getMessage());}}

vue 文件上传组件封装相关推荐

Vue：利用Plupload插件封装文件上传组件
接上回<Plupload插件>,已经尝试将Plupload插件引入到HTML页面中,并进行参数配置,然后联合后端接口进行调试,完成了文件上传的工作.但是在Vue项目的开发中,我们更想将它封 ...
antd design Upload文件上传，删除，批量上传组件封装
1.单个文件上传组件,无文件时显示上传,有文件时显示文件,可删除,重新上传,样式适合图片上传,可根据文件格式更改样式,效果图如下. 页面调用代码 <FormItem{...formItemLay ...
ajax请求携带tooken_Spring Boot+Vue 文件上传，如何携带令牌信息？
关于文件上传这块,松哥之前也写了好几篇文章了,甚至还有视频: Spring Boot+Vue+FastDFS 实现前后端分离文件上传但是,之前和小伙伴们提到的方案,是基于 session 来做认证的 ...
vue文件上传功能bootstrap框架
vue文件上传功能bootstrap框架封装公共组件components/fileupload/FileUpload.vue 内容如下: 公共组件 ```html <template>& ...
Vue文件上传和图片上传实例
图片上传 1.先通过组件库选择对应的文件上传组件,或者自行封装的组件,示例选的的Ant Design Vue组件库. 代码: <a-uploadaction="xxxxxxxxx&qu ...
Java 文件上传组件 Apache Commons FileUpload 应用指南（二）——FileUpload如何工作？
在最初的 http 协议中,没有上传文件方面的功能.RFC1867("Form-based File Upload in HTML".) 为 http 协议添加了这个功能.客户端的 ...
使用 Apache的文件上传组件（common-fileupload）来实现文件的上传
文章目录一.前言/先导二.步骤三.源码四.测试结果五.文件的下载一.前言/先导 maven的依赖: 注意:common-fileupload,它需要依赖于 commons-io组件: &l ...
1.6 文件上传组件
1.6 文件上传组件 1.6.1 基本形制 <input type="file" name="myfile"/> form的完整形制如下,它必须设定 ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...

vue 文件上传组件封装

vue 文件上传组件封装相关推荐

最新文章

热门文章