|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<div class="upload-file" :style="{width: maxNums>1?'100%':'auto'}">
|
|
|
- <!-- <a-upload
|
|
|
+ <!-- previewFile 暂时去掉,否则不能正常回显 -->
|
|
|
+ <a-upload
|
|
|
:action="action"
|
|
|
:listType="listType"
|
|
|
:fileList="fileList"
|
|
|
@preview="handlePreview"
|
|
|
@change="handleChange"
|
|
|
:beforeUpload="beforeUpload"
|
|
|
- :preview-file="previewFile"
|
|
|
:data="params"
|
|
|
:value="comVal"
|
|
|
>
|
|
@@ -22,21 +22,6 @@
|
|
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
<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> -->
|
|
|
- <a-upload
|
|
|
- :action="action"
|
|
|
- list-type="picture-card"
|
|
|
- :file-list="fileList"
|
|
|
- @preview="handlePreview"
|
|
|
- @change="handleChange"
|
|
|
- >
|
|
|
- <div v-if="fileList.length < maxNums && listType=='picture-card'">
|
|
|
- <a-icon type="plus" />
|
|
|
- <div class="ant-upload-text">{{ upText }}</div>
|
|
|
- </div>
|
|
|
- </a-upload>
|
|
|
- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
- <img alt="example" style="width: 100%" :src="previewImage" />
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -111,114 +96,98 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleCancel() {
|
|
|
- this.previewVisible = false;
|
|
|
+ setFileList (a) {
|
|
|
+ const temp = []
|
|
|
+ if (a && a.length > 0) {
|
|
|
+ a.split(',').map((item, index) => {
|
|
|
+ if (item) {
|
|
|
+ temp.push({
|
|
|
+ uid: index,
|
|
|
+ name: item,
|
|
|
+ status: 'done',
|
|
|
+ url: item,
|
|
|
+ response: {
|
|
|
+ data: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.fileList = temp
|
|
|
+ },
|
|
|
+ handleCancel () {
|
|
|
+ this.previewVisible = false
|
|
|
+ },
|
|
|
+ handlePreview (file) {
|
|
|
+ if (this.listType == 'text') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log(file,'8888888888')
|
|
|
+ this.previewImage = file.url || file.thumbUrl
|
|
|
+ // this.previewImage = file.response.data
|
|
|
+ this.previewVisible = true
|
|
|
},
|
|
|
- async handlePreview(file) {
|
|
|
- if (!file.url && !file.preview) {
|
|
|
- file.preview = await getBase64(file.originFileObj);
|
|
|
+ handleChange ({ file, fileList }) {
|
|
|
+ if (file.status == 'error') {
|
|
|
+ this.$message.error('上传失败,请重试!')
|
|
|
+ return
|
|
|
}
|
|
|
- this.previewImage = file.url || file.preview;
|
|
|
- this.previewVisible = true;
|
|
|
+ this.fileList = this.validaFile(file, fileList)
|
|
|
+ this.$emit('change', this.formatFile())
|
|
|
},
|
|
|
- handleChange({ fileList }) {
|
|
|
- this.fileList = fileList;
|
|
|
+ // 格式化文件列表数据,给表单
|
|
|
+ formatFile () {
|
|
|
+ const a = this.fileList
|
|
|
+ const temp = []
|
|
|
+ if (a && a.length) {
|
|
|
+ a.map(item => {
|
|
|
+ if (item.response && item.status == 'done') {
|
|
|
+ temp.push(item.response.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return temp.join(',')
|
|
|
},
|
|
|
- // setFileList (a) {
|
|
|
- // const temp = []
|
|
|
- // if (a && a.length > 0) {
|
|
|
- // a.split(',').map((item, index) => {
|
|
|
- // if (item) {
|
|
|
- // temp.push({
|
|
|
- // uid: index,
|
|
|
- // name: item,
|
|
|
- // status: 'done',
|
|
|
- // url: item,
|
|
|
- // response: {
|
|
|
- // data: item
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // this.fileList = temp
|
|
|
- // },
|
|
|
- // handleCancel () {
|
|
|
- // this.previewVisible = false
|
|
|
- // },
|
|
|
- // handlePreview (file) {
|
|
|
- // 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') {
|
|
|
- // this.$message.error('上传失败,请重试!')
|
|
|
- // return
|
|
|
- // }
|
|
|
- // this.fileList = this.validaFile(file, fileList)
|
|
|
- // this.$emit('change', this.formatFile())
|
|
|
- // },
|
|
|
- // // 格式化文件列表数据,给表单
|
|
|
- // formatFile () {
|
|
|
- // const a = this.fileList
|
|
|
- // const temp = []
|
|
|
- // if (a && a.length) {
|
|
|
- // a.map(item => {
|
|
|
- // if (item.response && item.status == 'done') {
|
|
|
- // temp.push(item.response.data)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // return temp.join(',')
|
|
|
- // },
|
|
|
- // // 文件校验
|
|
|
- // validaFile (file, filesList) {
|
|
|
- // 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)
|
|
|
- // filesList.splice(index, 1)
|
|
|
- // }
|
|
|
- // return filesList || []
|
|
|
- // },
|
|
|
- // // 上传前校验
|
|
|
- // beforeUpload (file, tip) {
|
|
|
- // // 不限制
|
|
|
- // if (this.fileType == '*') {
|
|
|
- // return true
|
|
|
- // }
|
|
|
-
|
|
|
- // const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
|
|
|
- // if (!isType) {
|
|
|
- // 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') {
|
|
|
- // this.$message.error('图片不能超过 ' + this.fileSize + 'MB!')
|
|
|
- // } else {
|
|
|
- // this.$message.error('视频不能超过 ' + this.fileSize + 'MB!')
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return isLt2M
|
|
|
- // }
|
|
|
+ // 文件校验
|
|
|
+ validaFile (file, filesList) {
|
|
|
+ if (filesList.length == 0) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
|
|
|
- // return true
|
|
|
- // }
|
|
|
+ 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)
|
|
|
+ filesList.splice(index, 1)
|
|
|
+ }
|
|
|
+ return filesList || []
|
|
|
+ },
|
|
|
+ // 上传前校验
|
|
|
+ beforeUpload (file, tip) {
|
|
|
+ // 不限制
|
|
|
+ if (this.fileType == '*') {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
|
|
|
+ if (!isType) {
|
|
|
+ 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') {
|
|
|
+ this.$message.error('图片不能超过 ' + this.fileSize + 'MB!')
|
|
|
+ } else {
|
|
|
+ this.$message.error('视频不能超过 ' + this.fileSize + 'MB!')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return isLt2M
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|