|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-upload action :accept="defFilterTypes" list-type="picture-card" :on-change="handleChange" :file-list="fileList" :http-request="uploadFile"
|
|
|
- :limit="limitCount" :class="{hide:hideUpload}">
|
|
|
+ :on-success="uploadSuccess" :on-error="uploadError" :limit="limitCount" :class="{hide:hideUpload}">
|
|
|
<i slot="default" class="el-icon-plus" />
|
|
|
- <div v-for="file in uploadFileList" slot="file">
|
|
|
+ <div slot="file" slot-scope="{file}">
|
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
|
|
|
<span class="el-upload-list__item-actions">
|
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
@@ -59,33 +59,31 @@
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- console.log('====initupload====')
|
|
|
+ this.uploadFileList = []
|
|
|
+ this.fileList = []
|
|
|
if (this.linkId || this.linkUrl) { // 编辑进来
|
|
|
if (this.type === 2 && this.limitCount === 1) {
|
|
|
this.fileList.push({
|
|
|
url: this.linkUrl
|
|
|
})
|
|
|
- this.uploadFileList.push({
|
|
|
- url: this.linkUrl
|
|
|
- })
|
|
|
this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
} else {
|
|
|
getFileList(this.linkId).then((res) => {
|
|
|
const tempData = res.data
|
|
|
if (typeof tempData !== 'undefined' && tempData !== '') {
|
|
|
- this.fileList = []
|
|
|
for (var i = 0; i < tempData.length; i++) {
|
|
|
this.fileList.push(tempData[i])
|
|
|
}
|
|
|
- this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
} else {
|
|
|
this.fileList = []
|
|
|
}
|
|
|
+ this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
}).catch((err) => {
|
|
|
this.$message.error(err.message)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+ this.refreshUploadFile()
|
|
|
},
|
|
|
handleClick(tab, event) {
|
|
|
// console.log(tab, event)
|
|
|
@@ -94,39 +92,65 @@
|
|
|
handleChange(file, fileList) {
|
|
|
this.fileList = fileList
|
|
|
this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
- console.log(this.hideUpload)
|
|
|
this.refreshUploadFile()
|
|
|
},
|
|
|
+ // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
|
|
|
+ beforeUploadFile(file) {
|
|
|
+ let isSubmit = true
|
|
|
+
|
|
|
+ const size = file.size / 1024 / 1024
|
|
|
+ if (size > 10) {
|
|
|
+ this.$message.warning('文件大小不得超过10M')
|
|
|
+ isSubmit = false
|
|
|
+ }
|
|
|
+ return isSubmit
|
|
|
+ },
|
|
|
// 移除
|
|
|
handleRemove(file) {
|
|
|
// 使用filter()方法从数组中删除元素
|
|
|
- if (this.type === 1) {
|
|
|
- const index = this.uploadFileList.findIndex(item => item.id === file.id)
|
|
|
- this.uploadFileList.splice(index, 1)
|
|
|
- } else {
|
|
|
- this.uploadFileList.splice(0, 1)
|
|
|
- }
|
|
|
+ const index = this.fileList.findIndex(item => item.url === file.url)
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
this.refreshUploadFile()
|
|
|
setTimeout(() => {
|
|
|
- this.hideUpload = this.uploadFileList.length >= this.limitCount
|
|
|
+ this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
}, 1000)
|
|
|
},
|
|
|
uploadFile(file) {
|
|
|
+ const self = this
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '附件上传中',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
// 发起上传
|
|
|
uploadhimage(file).then((res) => {
|
|
|
const tempData = res.data
|
|
|
- this.uploadFileList.push(tempData)
|
|
|
- this.refreshUploadFile()
|
|
|
+ self.fileList[self.fileList.length - 1] = tempData
|
|
|
+ self.refreshUploadFile()
|
|
|
+ loading.close()
|
|
|
+ }).catch((err) => {
|
|
|
+ self.fileList.splice(self.fileList.length - 1, 1)
|
|
|
+ console.log(err)
|
|
|
+ loading.close()
|
|
|
+ this.$message.error('上传失败')
|
|
|
})
|
|
|
},
|
|
|
+ uploadSuccess(file) {
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ },
|
|
|
+ uploadError(err, file, fileList) {
|
|
|
+ this.$message.error('上传失败' + err)
|
|
|
+ },
|
|
|
refreshUploadFile() {
|
|
|
if (this.type === 2 && this.limitCount === 1) {
|
|
|
- if (this.uploadFileList.length > 0) {
|
|
|
- this.$emit('refreshModel', this.uploadFileList[0].url)
|
|
|
+ if (this.fileList.length > 0) {
|
|
|
+ this.$emit('refreshModel', this.fileList[0].url)
|
|
|
} else {
|
|
|
this.$emit('refreshModel', undefined)
|
|
|
}
|
|
|
} else {
|
|
|
+ this.uploadFileList = this.fileList
|
|
|
this.$emit('refreshModel', JSON.stringify(this.uploadFileList))
|
|
|
}
|
|
|
}
|
soft5566