<template>
|
<div class="upload_single_file">
|
<!-- 上传文件组件(单) -->
|
<el-upload
|
ref="refUploadFile"
|
:auto-upload="false"
|
action="#"
|
:limit="1"
|
:file-list="uploadFiles"
|
:on-change="addUploadFile"
|
:on-remove="delUploadFile"
|
:http-request="uploadFile"
|
:before-upload="beforeUploadFile"
|
size="mini"
|
>
|
<el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
|
export default {
|
mixins: [mixin_upload],
|
model: {
|
prop: 'uploadFiles',
|
event: 'change'
|
},
|
props: {
|
uploadFiles: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
|
},
|
|
data() {
|
return {
|
callback: null
|
}
|
},
|
|
methods: {
|
// 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前确认格式
|
beforeUploadFile(file) {
|
const isTooLarge = file.size / 1024 / 1024 > 50
|
let flag = true
|
if (isTooLarge) {
|
this.$message.error('请勿上传大于50MB的文件')
|
flag = false
|
}
|
return flag
|
},
|
// 增加文件
|
addUploadFile(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
// 删除文件
|
delUploadFile(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
// 执行上传商品图
|
runUploadFile(suc_cb) {
|
if (this.checkNeedUpload(this.uploadFiles)) {
|
this.callback = suc_cb
|
this.$refs.refUploadFile.submit()
|
} else {
|
suc_cb && suc_cb()
|
}
|
},
|
// 上传文件
|
uploadFile(res) {
|
console.log(res)
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
this.postFN({
|
url: 'admin/image/upload?folderCode=FILE',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: '上传文件成功'
|
}
|
}
|
}, (inf) => {
|
// 替换掉未上传的文件
|
this.$emit('change', [{ name: '文件' + this.extname(inf.imgUrl), url: inf.imgUrl, status: 'success' }])
|
|
console.log('上传文件成功且结束')
|
|
// 提交
|
// this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
|
this.callback && this.callback(inf.imgUrl)
|
})
|
},
|
// 获取文件后缀名
|
extname(filename) {
|
if (!filename || typeof filename !== 'string') {
|
return ''
|
}
|
const a = filename.split('').reverse().join('')
|
const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
|
return b
|
}
|
// 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
}
|
}
|
</script>
|
|
<style>
|
.upload_single_file .el-upload-list__item-name{
|
padding: 5px!important;
|
}
|
</style>
|
