element 附件上传/文件上传组件

本文主要是介绍element 附件上传/文件上传组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实例：
在这里插入图片描述
组件代码：

<template><div><el-uploadclass="upload-demo"action="":auto-upload="false":on-change="submitFile":before-remove="handleRemove":limit="limit":on-exceed="handleExceed":file-list="fileList":show-file-list="showFile"><el-buttonicon="el-icon-upload2"style="position: absolute; left: 120px; top: 0px;">上传文件</el-button></el-upload></div>
</template><script>
export default {name: '',components: {},props: {limit: {type: Number,default: 1},fileList: {type: Array,default: function () {return []}},showFile: {type: Boolean,default: true},sizeLimit: {// 最大单文件大小type: Number,default: 50}},data () {return {file: ''}},created () {},mounted () {},methods: {beforeUpload (file) {console.log(file, 'file.name')return new Promise((resolve, reject) => {if (!/\.(jpg|jpeg|png|JPG|PNG|pdf|doc|docx)$/.test(file.name)) {// eslint-disable-next-line prefer-promise-reject-errorsthis.$message.warning('附件只支持JPG/JPEG/PNG/PDF/DOC/DOCX格式!')this.fileList = []return false}const filePost = file.name.substring(file.name.lastIndexOf('.') + 1)console.log(filePost, 'filePost')if (filePost === 'doc' || filePost === 'docx') {if (file.size > 10 * 1024 * 1024) {console.log(file.size, 'file.size')// eslint-disable-next-line prefer-promise-reject-errorsthis.$message.warning('上传word大小不能超过10M!')this.fileList = []return false}} else {if (file.size > this.sizeLimit * 1024 * 1024) {console.log(file.size, 'file.size')// eslint-disable-next-line prefer-promise-reject-errorsthis.$message.warning(`上传附件大小不能超过${this.sizeLimit}M!`)this.fileList = []return false}}// if (file.size > this.sizeLimit * 1024 * 1024) {//   console.log(file.size, 'file.size')//   // eslint-disable-next-line prefer-promise-reject-errors//   this.$message.warning(`上传图片大小不能超过${this.sizeLimit}M!`)//   this.fileList = []//   return false// }resolve()})},async submitFile (file, fileList) {// 获取上传的文件console.log(file, 'file')await this.beforeUpload(file)this.$emit('success', file, fileList)},handleRemove (file, fileList) {console.log(file, fileList, '移除前确认')return this.$confirm(`确定移除 ${file.name}？`)},handleExceed (files, fileList) {this.$message.warning(`仅可上传${this.limit}个附件`)}}
}
</script><style lang='scss' scoped>
::v-deep .el-upload-list {margin-left: 46px;
}
</style>

页面调用：

import fileUpload from '@/components/fileUpload.vue'
components: { fileUpload }

<el-form-item label="上传附件:" class="accessory"><file-upload:fileList="accessory"@success="handlesuccess"></file-upload><divstyle="width: 300px;color: #999;margin-left: 120px;font-size: 12px;"><p>可上传本人简历，作品集及其他代表性附件内容</p><p>附件大小：DOC/DOCX小于10MB，其它小于50MB</p></div>
</el-form-item>

handlesuccess (file, fileList) { // 上传成功this.file = file
}

注意：我这里是单文件上传，如果是多文件的话，this.file应该是一个数组，删除的话从数组找file进行删除。。。还有，这里用的是手动上传，也就是在改变upload的时候是不会上传的，只会存在本地，在用户点击提交按钮后用formData处理后调用文件上传接口进行提交，这样做的好处是可以预防服务器脏数据。
实例：

// 附件上传async fileUpload () {const that = thisconst fileList = []fileList.push(this.file) // this.file 就是暂存的file文件if (fileList.length) {const params = new FormData()fileList.map(item => {params.append('attachment', item.raw) // attachment就是后端要的键名})const res = await serve.fileUploads(params) // 调后端接口进行上传if (res.data.code === 200) {that.enclosure = JSON.parse(JSON.stringify(res.data.data.url)) // 保存返回的filePath和表单一起提交} else {this.$loading().close()that.$message.warning(res.data.msg)}}},