|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="upload-file" :style="{width: maxNums>1?'100%':'auto'}">
|
|
|
+ <div class="upload-file" :style="{ width: maxNums > 1 ? '100%' : 'auto' }">
|
|
|
<!-- previewFile 暂时去掉,否则不能正常回显 -->
|
|
|
<a-upload
|
|
|
:action="action"
|
|
@@ -11,16 +11,19 @@
|
|
|
:data="params"
|
|
|
:value="comVal"
|
|
|
>
|
|
|
- <div v-if="fileList.length < maxNums && listType=='picture-card'">
|
|
|
+ <div v-if="fileList.length < maxNums && listType == 'picture-card'">
|
|
|
<a-icon type="plus" />
|
|
|
- <div class="ant-upload-text"> {{ upText }}</div>
|
|
|
+ <div class="ant-upload-text">{{ upText }}</div>
|
|
|
</div>
|
|
|
- <div v-if="fileList.length < maxNums && listType!='picture-card'">
|
|
|
- <a-button> <a-icon type="upload" /> {{ upText }} </a-button>
|
|
|
+ <div v-if="fileList.length < maxNums && listType != 'picture-card'">
|
|
|
+ <a-button>
|
|
|
+ <a-icon type="upload" />
|
|
|
+ {{ upText }}
|
|
|
+ </a-button>
|
|
|
</div>
|
|
|
</a-upload>
|
|
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
- <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
|
|
|
+ <video v-if="fileType == 'video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
|
|
|
<img v-else alt="example" style="width: 100%" :src="previewImage" />
|
|
|
</a-modal>
|
|
|
</div>
|
|
@@ -43,9 +46,7 @@ export default {
|
|
|
},
|
|
|
previewFile: {
|
|
|
type: Function,
|
|
|
- default: function () {
|
|
|
-
|
|
|
- }
|
|
|
+ default: function () {}
|
|
|
},
|
|
|
action: {
|
|
|
type: String,
|
|
@@ -60,7 +61,8 @@ export default {
|
|
|
default: '上传'
|
|
|
},
|
|
|
value: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
},
|
|
|
uploadParams: {
|
|
|
type: Object,
|
|
@@ -73,9 +75,8 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
value (a, b) {
|
|
|
- console.log(a, '=--====')
|
|
|
this.comVal = a || ''
|
|
|
- if (a == undefined) {
|
|
|
+ if (a === undefined) {
|
|
|
this.fileList = []
|
|
|
}
|
|
|
}
|
|
@@ -113,16 +114,15 @@ export default {
|
|
|
this.previewVisible = false
|
|
|
},
|
|
|
handlePreview (file) {
|
|
|
- if (this.listType == 'text') {
|
|
|
+ if (this.listType === 'text') {
|
|
|
return
|
|
|
}
|
|
|
- console.log(file,'8888888888')
|
|
|
this.previewImage = file.url || file.thumbUrl
|
|
|
// this.previewImage = file.response.data
|
|
|
this.previewVisible = true
|
|
|
},
|
|
|
handleChange ({ file, fileList }) {
|
|
|
- if (file.status == 'error') {
|
|
|
+ if (file.status === 'error') {
|
|
|
this.$message.error('上传失败,请重试!')
|
|
|
return
|
|
|
}
|
|
@@ -135,7 +135,7 @@ export default {
|
|
|
const temp = []
|
|
|
if (a && a.length) {
|
|
|
a.map(item => {
|
|
|
- if (item.response && item.status == 'done') {
|
|
|
+ if (item.response && item.status === 'done') {
|
|
|
temp.push(item.response.data)
|
|
|
}
|
|
|
})
|
|
@@ -144,13 +144,11 @@ export default {
|
|
|
},
|
|
|
// 文件校验
|
|
|
validaFile (file, filesList) {
|
|
|
- if (filesList.length == 0) {
|
|
|
+ if (filesList.length === 0) {
|
|
|
return []
|
|
|
}
|
|
|
-
|
|
|
- console.log(file, filesList, this.beforeUpload(file, 0))
|
|
|
- if (!this.beforeUpload(file, 0) && file.status != 'removed') {
|
|
|
- const index = filesList.findIndex(item => item.uid == file.uid)
|
|
|
+ if (!this.beforeUpload(file, 0) && file.status !== 'removed') {
|
|
|
+ const index = filesList.findIndex(item => Number(item.uid) === Number(file.uid))
|
|
|
filesList.splice(index, 1)
|
|
|
}
|
|
|
return filesList || []
|
|
@@ -158,23 +156,21 @@ export default {
|
|
|
// 上传前校验
|
|
|
beforeUpload (file, tip) {
|
|
|
// 不限制
|
|
|
- if (this.fileType == '*') {
|
|
|
+ if (this.fileType === '*') {
|
|
|
return true
|
|
|
}
|
|
|
-
|
|
|
- const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
|
|
|
+ const isType = this.fileType.indexOf(file.type) >= 0 && file.type !== ''
|
|
|
if (!isType) {
|
|
|
- if (tip != 0) {
|
|
|
+ if (tip !== 0) {
|
|
|
this.$message.error('请上传正确的格式!')
|
|
|
}
|
|
|
return isType
|
|
|
}
|
|
|
-
|
|
|
// 文件大小
|
|
|
const isLt2M = file.size / 1024 / 1024 < this.fileSize
|
|
|
- if (!isLt2M ) {
|
|
|
- if (tip != 0) {
|
|
|
- if (this.fileType !='video/mp4') {
|
|
|
+ if (!isLt2M) {
|
|
|
+ if (tip !== 0) {
|
|
|
+ if (this.fileType !== 'video/mp4') {
|
|
|
this.$message.error('图片不能超过 ' + this.fileSize + 'MB!')
|
|
|
} else {
|
|
|
this.$message.error('视频不能超过 ' + this.fileSize + 'MB!')
|
|
@@ -182,47 +178,45 @@ export default {
|
|
|
}
|
|
|
return isLt2M
|
|
|
}
|
|
|
-
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- .upload-file{
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- /* you can make up upload button and sample style by using stylesheets */
|
|
|
- .ant-upload-select-picture-card i {
|
|
|
- font-size: 32px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .ant-upload-select-picture-card .ant-upload-text {
|
|
|
- margin-top: 8px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- .ant-upload-btn{
|
|
|
- height: 100%;
|
|
|
- >div{
|
|
|
- padding: 4px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .ant-upload.ant-upload-select-picture-card,
|
|
|
- .ant-upload-list-picture-card .ant-upload-list-item{
|
|
|
- width:80px;
|
|
|
- height:80px;
|
|
|
- padding: 4px;
|
|
|
- }
|
|
|
- .ant-upload-list-item-info{
|
|
|
- padding: 0 22px 0 4px;
|
|
|
- }
|
|
|
- .ant-upload-list-item .anticon-close{
|
|
|
- color: red;
|
|
|
- }
|
|
|
- .ant-upload-list-item-name{
|
|
|
- word-break: break-all;
|
|
|
- white-space: normal;
|
|
|
+.upload-file {
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ /* you can make up upload button and sample style by using stylesheets */
|
|
|
+ .ant-upload-select-picture-card i {
|
|
|
+ font-size: 32px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .ant-upload-select-picture-card .ant-upload-text {
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .ant-upload-btn {
|
|
|
+ height: 100%;
|
|
|
+ > div {
|
|
|
+ padding: 4px 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ .ant-upload.ant-upload-select-picture-card,
|
|
|
+ .ant-upload-list-picture-card .ant-upload-list-item {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ padding: 4px;
|
|
|
+ }
|
|
|
+ .ant-upload-list-item-info {
|
|
|
+ padding: 0 22px 0 4px;
|
|
|
+ }
|
|
|
+ .ant-upload-list-item .anticon-close {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .ant-upload-list-item-name {
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|