|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="upload-file" :style="{width: maxNums>1?'100%':'auto'}">
|
|
|
- <a-upload
|
|
|
+ <!-- <a-upload
|
|
|
:action="action"
|
|
|
:listType="listType"
|
|
|
:fileList="fileList"
|
|
@@ -22,10 +22,33 @@
|
|
|
<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>
|
|
|
<script>
|
|
|
+ function getBase64(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = () => resolve(reader.result);
|
|
|
+ reader.onerror = error => reject(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
export default {
|
|
|
name: 'Upload',
|
|
|
props: {
|
|
@@ -43,9 +66,7 @@ export default {
|
|
|
},
|
|
|
previewFile: {
|
|
|
type: Function,
|
|
|
- default: function () {
|
|
|
-
|
|
|
- }
|
|
|
+ default: function () {}
|
|
|
},
|
|
|
action: {
|
|
|
type: String,
|
|
@@ -90,101 +111,114 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- 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
|
|
|
+ handleCancel() {
|
|
|
+ this.previewVisible = false;
|
|
|
},
|
|
|
- handlePreview (file) {
|
|
|
- if (this.listType == 'text') {
|
|
|
- return
|
|
|
+ async handlePreview(file) {
|
|
|
+ if (!file.url && !file.preview) {
|
|
|
+ file.preview = await getBase64(file.originFileObj);
|
|
|
}
|
|
|
- console.log(file,'8888888888')
|
|
|
- this.previewImage = file.url || file.thumbUrl
|
|
|
- // this.previewImage = file.response.data
|
|
|
- this.previewVisible = true
|
|
|
+ this.previewImage = file.url || file.preview;
|
|
|
+ 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())
|
|
|
+ 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(',')
|
|
|
- },
|
|
|
- // 文件校验
|
|
|
- validaFile (file, filesList) {
|
|
|
- if (filesList.length == 0) {
|
|
|
- return []
|
|
|
- }
|
|
|
+ // 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
|
|
|
- }
|
|
|
+ // 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 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
|
|
|
- }
|
|
|
+ // // 文件大小
|
|
|
+ // 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
|
|
|
- }
|
|
|
+ // return true
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
</script>
|