1 changed files with 0 additions and 194 deletions
@ -1,194 +0,0 @@ |
|||||
<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 { imgUploadz } from '@/api/jichuxinxi/baseaffiliatcompany' |
|
||||
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, |
|
||||
}, |
|
||||
types:{ |
|
||||
type:String, |
|
||||
required: true, |
|
||||
}, |
|
||||
linkChange: { |
|
||||
type: String, |
|
||||
default: '', |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
datas: null, |
|
||||
types:types, |
|
||||
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() { |
|
||||
this.datas = { type: this.types } |
|
||||
// console.log(this.datas,7777777) |
|
||||
console.log(this.type, '船只被') |
|
||||
}, |
|
||||
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) { |
|
||||
// console.log('fileList:' + JSON.stringify(fileList)) |
|
||||
|
|
||||
// this.enclosure = '' |
|
||||
// 1. 保存新增文件id(this.file_add) |
|
||||
// this.getNewFileId(fileList) |
|
||||
// 2. 保存并拼接id |
|
||||
// this.getFileId() |
|
||||
// console.log('4. 返回拼接：' + this.enclosure) |
|
||||
// 3. 返回拼接id |
|
||||
this.$emit('change', this.enclosure) |
|
||||
}, |
|
||||
handleRemove(file, fileList) { |
|
||||
// console.log('file:' + JSON.stringify(file)) |
|
||||
// console.log('fileList:' + JSON.stringify(fileList)) |
|
||||
// this.enclosure = '' |
|
||||
// 1. 保存新增文件id(this.file_add) |
|
||||
// this.getNewFileId(fileList) |
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch) |
|
||||
// this.getCatchFileId(file) |
|
||||
// 3. 保存并拼接id |
|
||||
// this.getFileId() |
|
||||
// 4. 返回拼接id |
|
||||
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) |
|
||||
// 项目封装的请求方法，下面做简单介绍 |
|
||||
console.log('988888',form.append) |
|
||||
imgUploadz(form).then((res) => { |
|
||||
// 自行处理各种情况 |
|
||||
if (res.code === '200') { |
|
||||
res.data.attachType = this.types |
|
||||
let a = '' |
|
||||
a = res.data.filePath |
|
||||
this.idsz = a |
|
||||
this.$emit('handleSuccess', res) |
|
||||
} |
|
||||
// this.FrontPhoto = res.fullUrl |
|
||||
if (res.msg == '操作成功') { |
|
||||
this.$message({ |
|
||||
message: '上传成功！', |
|
||||
type: 'success', |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
.catch((err) => { |
|
||||
console.log(err) |
|
||||
// 如果等于备案,就调备案图片上传接口 |
|
||||
}) |
|
||||
}, |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
|
||||
Loading…
Reference in new issue