标签：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. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。