166 lines
4.2 KiB
Vue
166 lines
4.2 KiB
Vue
<template>
|
||
<div>
|
||
<el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess"
|
||
:on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian"
|
||
:http-request="uploadSectionFile">
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
<div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div>
|
||
</el-upload>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
uploadFile
|
||
} from '@/api/business/beiAn'
|
||
import {
|
||
mapGetters
|
||
} from 'vuex'
|
||
export default {
|
||
props: {
|
||
placeholder: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
// 长度
|
||
width: {
|
||
type: String,
|
||
default: '270px',
|
||
},
|
||
accept: {
|
||
type: String,
|
||
default: '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx',
|
||
},
|
||
// 文件列表
|
||
files: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
// 文件名称
|
||
name: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
datas: null,
|
||
name:null,
|
||
accessToken: {},
|
||
fileList_FuJian: [],
|
||
enclosure: '',
|
||
file_add: '',
|
||
idsz: '',
|
||
file_catch: '',
|
||
files_list: [],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'id',
|
||
'departmentCode',
|
||
'departmentLevel',
|
||
'departmentType',
|
||
'token',
|
||
]),
|
||
},
|
||
watch: {
|
||
files: {
|
||
deep: true,
|
||
handler(val) {
|
||
this.pageLoad(val, '')
|
||
},
|
||
},
|
||
},
|
||
creatd() {
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
// this.Init()
|
||
})
|
||
},
|
||
methods: {
|
||
// 页面第一次加载
|
||
Init() {
|
||
// 1. 文件上传用token
|
||
// this.accessToken = {
|
||
// token: this.token,
|
||
// }
|
||
this.pageLoad(this.files)
|
||
},
|
||
handleChange(file, fileList) {},
|
||
// 传入数据并绑定
|
||
pageLoad(files) {
|
||
// console.log('传入：' + files)
|
||
if (files !== null && files !== '') {
|
||
this.files_list = JSON.parse(files)
|
||
var ids = ''
|
||
this.fileList_FuJian = []
|
||
// 1. 回显页面
|
||
for (var i = 0; i < this.files_list.length; i++) {
|
||
var body = {
|
||
name: this.files_list[i].name,
|
||
url: '',
|
||
status: 'finished',
|
||
}
|
||
this.fileList_FuJian.push(body)
|
||
ids = ids + this.files_list[i].id + ','
|
||
}
|
||
// 2. 回存文件id
|
||
if (ids !== '') {
|
||
ids = ids.substring(0, ids.length - 1)
|
||
}
|
||
this.enclosure = ids
|
||
this.file_catch = ids
|
||
} else {
|
||
this.file_add = ''
|
||
this.file_catch = ''
|
||
this.enclosure = ''
|
||
this.files_list = []
|
||
this.fileList_FuJian = []
|
||
}
|
||
},
|
||
// 上传方案--成功后执行
|
||
uploadImgSuccess(response, file, fileList) {
|
||
this.$emit('change', this.enclosure)
|
||
},
|
||
handleRemove(file, fileList) {
|
||
if (this.idsz != '') {
|
||
this.$emit('handleRemove', this.idsz)
|
||
}
|
||
},
|
||
// 上传文件 FrontPhoto
|
||
uploadSectionFile(params) {
|
||
const file = params.file
|
||
// 根据后台需求数据格式
|
||
const form = new FormData()
|
||
// console.log('77777777777777',form)
|
||
// 文件对象
|
||
form.append('file', file)
|
||
// 项目封装的请求方法，下面做简单介绍
|
||
uploadFile(form).then((res) => {
|
||
// 自行处理各种情况
|
||
if (res.code === '200') {
|
||
let a = ''
|
||
a = res.data.filePath
|
||
this.idsz = a
|
||
this.$emit('handleSuccess', res)
|
||
}
|
||
if (res.msg == '操作成功') {
|
||
this.$message({
|
||
message: '上传成功！',
|
||
type: 'success',
|
||
})
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err)
|
||
// 如果等于备案,就调备案图片上传接口
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|