vue 文件上传封装 批量上传

子组件

<template>
<div>
<el-form
:ref="form"
:rules="rules"
:model="form"
label-width="110px"
style="overflow: hidden; margin-left: 300px; margin-top: 30px"
>
<el-col :span="12">
<el-form-item :label="`${title}:`" prop="files">
<el-upload
v-if="type"
v-model="form.files"
ref="upload"
class="upload-poster"
:limit="4"
:accept="accept"
:action="uploadAction"
list-type="picture-card"
:show-file-list="true"
:on-change="imgPreview"
:http-request="uploadFile"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="picUrl" alt="" />
</el-dialog>
</el-upload>
<el-upload
v-else
v-model="form.files"
ref="upload"
class="upload-poster"
:limit="4"
:accept="accept"
:action="uploadAction"
:show-file-list="true"
:on-change="imgPreview"
:http-request="uploadFile"
:auto-upload="false"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传{{ accept }}格式文件，且不超过{{ max }}M
</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button class="submit-button" @click="submitUpload(form)">
提交
</el-button>
</el-form-item>
</el-col>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: {
uploadObj: {
type: Object,
default: function () {
return ''
},
},
accept: {
type: String,
default: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP',
},
accept: {
type: String,
default: '4',
},
max: {
type: String,
default: '20',
},
action: {
type: String,
default: '/third/commonfile/files/upload',
},
title: {
type: String,
default: '上传图片',
},
type: {
type: Boolean,
default: true,
},
},
components: {},
data() {
return {
fileList: [],
dialogVisible: false,
picUrl: '',
uploadForm: new FormData(),
form: {
files: [],
},
}
},
computed: {
uploadAction() {
// console.log(process.env)
return ''
},
},
created() {
//this.nextTick(() => {});
},
mounted() {},
methods: {
/*由于element多文件是分别上传，所以这里覆盖默认的上传行为，将文件添加到FormData中*/
uploadFile(file) {
// console.log(file, 111)
this.uploadForm.append('files', file.file)
},
submitUpload(form) {
if (this.form.files.length > 0) {
this.$refs.upload.submit()
console.log(this.uploadForm)
this.$http.post(this.action, this.uploadForm).then(res => {
this.$message({ type: 'success', message: '提交成功!' })
this.reload()
})
// this.$api.submitUpload(this.uploadForm).then(res => {
// this.$message({ type: 'success', message: '提交成功!' })
// this.reload()
// })
} else {
this.$message({ type: 'error', message: '请上传附件!' })
}
},
imgPreview(file, fileList) {
// console.log(file)
// let obj = {
// name: file.name,
// }
// this.fileList.push(obj)
// console.log(this.fileList)
let fileName = file.name
let str = this.accept.split(',').join('|')
let regex = eval('/(' + str + ')$/')
// console.log(regex)
const isLt20M = file.raw.size / 1024 / 1024 < Number(this.max)
if (!isLt20M) {
this.$message({
message: `上传文件大小不能超过${Number(this.max)}MB!`,
type: 'warning',
})
fileList.pop()
}
if (regex.test(fileName.toLowerCase())) {
console.log(file.raw)
this.picUrl = URL.createObjectURL(file.raw)
this.form.files = fileList
} else {
//移除最后一个元素
fileList.pop()
this.$message.warn(`请选择${this.accept}格式文件`)
}
},
},
}
</script>
<style lang='scss'>
// .el-icon-document {
// z-index: 10000;
// }
</style>

父组件

<akm-import
:uploadObj="{}"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP,.txt"
limit="4"
max="20"
action="/third/commonfile/files/upload"
:type="1"
title="上传图片"
></akm-import>