ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue 文件上传封装 批量上传

2022-06-07 13:32:37  阅读:67  来源: 互联网

标签:vue 封装 type upload accept file message 上传


子组件

<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>

标签:vue,封装,type,upload,accept,file,message,上传
来源: https://www.cnblogs.com/xiaoxiao95/p/16351420.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有