深圳网站官网建设,网站返利程序,怎么做属于自己的网站,网站建网站建设网页1.写在之前
本文前端采用Vue element-plus技术栈#xff0c;前端项目参考yudao-ui-admin-vue3项目与Geeker-Admin项目。
这篇文章是el-form与el-upload结合上传带附件的表单数据#xff08;后端篇#xff09;-CSDN博客姐妹篇#xff0c;后端篇文章主要讲的是后端的实现逻…
1.写在之前
本文前端采用Vue element-plus技术栈前端项目参考yudao-ui-admin-vue3项目与Geeker-Admin项目。
这篇文章是el-form与el-upload结合上传带附件的表单数据后端篇-CSDN博客姐妹篇后端篇文章主要讲的是后端的实现逻辑前端篇稍微简单一些其实最主要的就是封装el-upload组件供具体的表单组件调用。
2.封装el-upload组件
废话不多说直接上代码。
templatediv classupload-fileel-upload:multipleprops.limit 1namefilev-model:file-list_fileList:show-file-listtrue:auto-uploadautoUpload:actionupdateUrl:headersuploadHeaders:limitprops.limit:dragdrag:before-uploadbeforeUpload:on-exceedhandleExceed:on-successhandleFileSuccess:on-errorexcelUploadError:on-removehandleRemove:on-previewhandlePreview:acceptfileType.join(,):data{ bucket: props.bucket }:disableddisabledclassupload-file-uploaderel-button v-if!disabled typeprimaryIcon iconep:upload-filled /选取文件/el-button/el-upload/div
/template
script langts setup
import { propTypes } from /utils/propTypes
import { getAccessToken } from /utils/auth
import type { UploadUserFile, UploadProps, UploadRawFile, UploadFile } from element-plus
import { downloadFile } from /api/infra/file
import download from /utils/downloaddefineOptions({ name: UploadFile })const message useMessage() // 消息弹窗
const emit defineEmits([update:fileList])const props defineProps({fileList: propTypes.array.def([]),title: propTypes.string.def(文件上传),updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),fileType: propTypes.array.def([]), // 文件类型, 例如[png, jpg, jpeg]fileSize: propTypes.number.def(500), // 大小限制(MB)limit: propTypes.number.def(5), // 数量限制autoUpload: propTypes.bool.def(true), // 自动上传drag: propTypes.bool.def(false), // 拖拽上传isShowTip: propTypes.bool.def(true), // 是否显示提示bucket: propTypes.string.def(operation), //默认存储到operation bucket中disabled: propTypes.bool.def(false)
})
// 上传相关
const uploadList refUploadUserFile[]([])
const _fileList refUploadUserFile[](props.fileList)
const uploadHeaders ref({Authorization: Bearer getAccessToken()
})// 监听 props.fileList 列表默认值改变
watch(() props.fileList,(n: UploadUserFile[]) {_fileList.value n}
)// 文件上传之前判断
const beforeUpload: UploadProps[beforeUpload] (file: UploadRawFile) {if (_fileList.value.length props.limit) {message.error(上传文件数量不能超过${props.limit}个!)return false}let fileExtension if (file.name.lastIndexOf(.) -1) {fileExtension file.name.slice(file.name.lastIndexOf(.))}const isImg props.fileType.some((type: string) {if (file.type.indexOf(type) -1) return truereturn !!(fileExtension fileExtension.indexOf(type) -1)})const isLimit file.size props.fileSize * 1024 * 1024if (!isImg) {message.error(文件格式不正确, 请上传${props.fileType.join(/)}格式!)return false}if (!isLimit) {message.error(上传文件大小不能超过${props.fileSize}MB!)return false}
}
const handleFileSuccess: UploadProps[onSuccess] (res: any): void {// 因为后端返回的res经过统一处理拦截 此处需要根据res返回的code判断是否真的上传成功let code: number res.codelet data res.dataif (code 200) {let name data.name //后端生成的文件唯一标识//前端存储中 如果有response相同的文件说明有相同内容的文件 需要清楚所有 只保存一个 即本次上传的文件_fileList.value _fileList.value.filter((item) item.name ! name)uploadList.value.push({ name: data.name, url: data.url, response: data.response })_fileList.value _fileList.value.concat(uploadList.value)_fileList.value.sort(sortFileList(name))uploadList.value []message.success(文件上传成功)emitUpdateModelValue()} else {message.error(文件上传失败)}
}
// 文件数超出提示
const handleExceed: UploadProps[onExceed] (): void {message.error(上传文件数量不能超过${props.limit}个!)
}
// 上传错误提示
const excelUploadError: UploadProps[onError] (): void {message.error(导入数据失败请您重新上传)
}
// 删除上传文件
const handleRemove (file) {const findex _fileList.value.map((f) f.name).indexOf(file.name)if (findex -1) {_fileList.value.splice(findex, 1)emitUpdateModelValue()}
}
const handlePreview: UploadProps[onPreview] async (uploadFile: UploadFile) {console.log(123)const res await downloadFile(uploadFile.response)console.log(res)download.commonFile(res, uploadFile.name)
}const emitUpdateModelValue () {emit(update:fileList, _fileList.value)
}//数组排序 按照名字升序
const sortFileList (name) {const rev 1return function (a, b) {a a[name]b b[name]if (a b) {return rev * -1}if (a b) {return rev}return 0}
}
/script
style scoped langscss
.upload-file-uploader {margin-bottom: 5px;
}:deep(.el-upload-list) {width: 400px;
}:deep(.upload-file-list .el-upload-list__item) {position: relative;margin-bottom: 10px;line-height: 2;border: 1px solid #e4e7ed;
}:deep(.el-upload-list__item-file-name) {max-width: 500px;
}:deep(.upload-file-list .ele-upload-list__item-content) {display: flex;justify-content: space-between;align-items: center;color: inherit;
}:deep(.ele-upload-list__item-content-action .el-link) {margin-right: 10px;
}
/style
代码组件个人理解没有什么好讲的。开启自动上传上传成功拿到后端的数据返回构造数据如果有名称相同的文件全部删除只使用最新的上传文件数据。上传成功后更新表单绑定的文件数据。
3.关于文件的下载
这里想要说一下文件的下载前期看了很多实现有使用a标签用文件的URL实现下载的有直接使用window.open(URL)实现的我在实际下载中遇到两个问题第一是遇到浏览器能处理的文件例如MP4的视频文件pdf的文本文件会直接打开不会下载第二个问题是下载的名称不能自己指定按照网上查找的方法指定也不起作用最后我选择的第二节中代码方法先获取文件内容后下载文件。
commonFile: (data: Blob, fileName: string) {download0(data, fileName, application/octet-stream)}const download0 (data: Blob, fileName: string, mineType: string) {// 创建 blobconst blob new Blob([data], { type: mineType })// 创建 href 超链接点击进行下载window.URL window.URL || window.webkitURLconst href URL.createObjectURL(blob)const downA document.createElement(a)downA.href hrefdownA.download fileNamedownA.click()// 销毁超连接window.URL.revokeObjectURL(href)
}
4.表单使用
先上一段代码上传的文件类型为file-type规定的文件类型。
trtdspan :class{ required: required }附件/span/tdtd colspan3el-form-item propfilesUploadFilev-model:file-listform.files:file-type[.jpg, .png, .docx, .pdf, .mp4]:disabled!required//el-form-itemel-form-itemspan stylecolor: red; font-size: 12px这是一些注意消息比如上传的文件个数上传的文件类型上传的文件大小上传的文件注意事项/span/el-form-item/td/tr
5.实际效果展示 6.写在最后
其实感觉前端只要有第二节封装组件的代码代码一看就一目了然就是在文件下载时候多花了一点小心思。本篇文章只是简单笼统的介绍了一下前端实现传文件具体的表单设计其实有很多立方需要讲后期的话如果有时间会录一个实际效果展示视频敬请期待。如果有不对的地方还请看到本篇文章的您不吝赐教。
