|
@@ -4,11 +4,13 @@
|
|
|
:action="action"
|
|
|
:listType="listType"
|
|
|
:fileList="fileList"
|
|
|
+ :disabled="disabled"
|
|
|
@preview="handlePreview"
|
|
|
@change="handleChange"
|
|
|
+ :remove="handleRemove"
|
|
|
:beforeUpload="beforeUpload"
|
|
|
- :preview-file="previewFile"
|
|
|
:data="params"
|
|
|
+ :headers="headers"
|
|
|
:value="comVal"
|
|
|
>
|
|
|
<div v-if="fileList.length < maxNums && listType=='picture-card'">
|
|
@@ -19,7 +21,7 @@
|
|
|
<a-button> <a-icon type="upload" /> {{ upText }} </a-button>
|
|
|
</div>
|
|
|
</a-upload>
|
|
|
- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
|
|
+ <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @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>
|
|
@@ -43,9 +45,7 @@ export default {
|
|
|
},
|
|
|
previewFile: {
|
|
|
type: Function,
|
|
|
- default: function () {
|
|
|
-
|
|
|
- }
|
|
|
+ default: function () {}
|
|
|
},
|
|
|
action: {
|
|
|
type: String,
|
|
@@ -57,7 +57,7 @@ export default {
|
|
|
},
|
|
|
upText: {
|
|
|
type: String,
|
|
|
- default: '上传'
|
|
|
+ default: ''
|
|
|
},
|
|
|
value: {
|
|
|
type: String
|
|
@@ -66,14 +66,21 @@ export default {
|
|
|
type: Object,
|
|
|
default: function () {
|
|
|
return {
|
|
|
- savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云
|
|
|
+ savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云, web
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ uploadType: { // 上传类型 img图片;attach附件;import导入
|
|
|
+ type: String,
|
|
|
+ default: 'img'
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
value (a, b) {
|
|
|
- console.log(a, '=--====')
|
|
|
this.comVal = a || ''
|
|
|
if (a == undefined) {
|
|
|
this.fileList = []
|
|
@@ -86,26 +93,47 @@ export default {
|
|
|
previewImage: '',
|
|
|
fileList: [],
|
|
|
comVal: this.value,
|
|
|
- params: this.uploadParams
|
|
|
+ params: this.uploadParams,
|
|
|
+ headers: {
|
|
|
+ 'access-token': this.$store.getters.token
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ if (this.uploadType == 'img' || this.uploadType == 'import') { // 图片/导入
|
|
|
+ a.split(',').map((item, index) => {
|
|
|
+ if (item) {
|
|
|
+ temp.push({
|
|
|
+ uid: index,
|
|
|
+ name: item,
|
|
|
+ status: 'done',
|
|
|
+ url: item,
|
|
|
+ response: {
|
|
|
+ data: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.uploadType == 'attach') { // 附件
|
|
|
+ a.map((item, index) => {
|
|
|
+ if (item) {
|
|
|
+ const arr = []
|
|
|
+ arr.push(item) // 包裹成与新上传文件数据返回结构一致
|
|
|
+ temp.push({
|
|
|
+ uid: index,
|
|
|
+ name: item.fileName,
|
|
|
+ status: 'done',
|
|
|
+ url: item.filePath,
|
|
|
+ response: {
|
|
|
+ data: arr
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
this.fileList = temp
|
|
|
},
|
|
@@ -116,39 +144,59 @@ export default {
|
|
|
if (this.listType == 'text') {
|
|
|
return
|
|
|
}
|
|
|
- console.log(file, '8888888888')
|
|
|
this.previewImage = file.url || file.thumbUrl
|
|
|
- // this.previewImage = file.response.data
|
|
|
this.previewVisible = true
|
|
|
},
|
|
|
+ handleRemove (file) {
|
|
|
+ this.$emit('remove')
|
|
|
+ },
|
|
|
handleChange ({ file, fileList }) {
|
|
|
- if (file.status == 'error') {
|
|
|
- this.$message.error('上传失败,请重试!')
|
|
|
- return
|
|
|
+ if (file.response && (file.response.status == 500 || file.response.status == 900)) {
|
|
|
+ if (file.status == 'error' || file.status == 'done') {
|
|
|
+ this.$message.error(file.response.message || '上传失败,请重试!')
|
|
|
+ this.$emit('remove')
|
|
|
+ return
|
|
|
+ }
|
|
|
}
|
|
|
this.fileList = this.validaFile(file, fileList)
|
|
|
this.$emit('change', this.formatFile())
|
|
|
+ this.$emit('input', this.formatFile())
|
|
|
},
|
|
|
// 格式化文件列表数据,给表单
|
|
|
formatFile () {
|
|
|
+ const _this = this
|
|
|
const a = this.fileList
|
|
|
- const temp = []
|
|
|
+ let temp = []
|
|
|
+ let obj = null
|
|
|
if (a && a.length) {
|
|
|
- a.map(item => {
|
|
|
- if (item.response && item.status == 'done') {
|
|
|
- temp.push(item.response.data)
|
|
|
- }
|
|
|
- })
|
|
|
+ if (this.uploadType == 'img' || this.uploadType == 'import') { // 图片/导入 将接口的返回图片地址逗号拼接后返回页面
|
|
|
+ a.map(item => {
|
|
|
+ if (item.response && item.status == 'done') {
|
|
|
+ temp.push(item.response.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ obj = temp.join(',')
|
|
|
+ } else if (this.uploadType == 'attach') { // 附件 将接口的返回数据返回页面
|
|
|
+ a.map(item => {
|
|
|
+ if (item.response && item.status == 'done') {
|
|
|
+ if (_this.maxNums == 1) {
|
|
|
+ temp = [item.response.data]
|
|
|
+ } else {
|
|
|
+ temp = [...temp, ...item.response.data]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ obj = JSON.stringify(temp)
|
|
|
+ }
|
|
|
}
|
|
|
- return temp.join(',')
|
|
|
+ return obj
|
|
|
},
|
|
|
// 文件校验
|
|
|
validaFile (file, filesList) {
|
|
|
if (filesList.length == 0) {
|
|
|
return []
|
|
|
}
|
|
|
-
|
|
|
- console.log(file, filesList, this.beforeUpload(file, 0))
|
|
|
+ // 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)
|
|
@@ -159,17 +207,24 @@ export default {
|
|
|
beforeUpload (file, tip) {
|
|
|
// 不限制
|
|
|
if (this.fileType == '*') {
|
|
|
+ // 文件大小
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < this.fileSize
|
|
|
+ if (!isLt2M) {
|
|
|
+ if (tip != 0) {
|
|
|
+ this.$message.error('上传文件不能超过 ' + this.fileSize + 'MB!')
|
|
|
+ }
|
|
|
+ return isLt2M
|
|
|
+ }
|
|
|
return true
|
|
|
}
|
|
|
-
|
|
|
const isType = this.fileType.indexOf(file.type) >= 0 && file.type != ''
|
|
|
- if (!isType) {
|
|
|
+ // 文件格式限制为.xls、.xlsx时,上传.csv文件的type为application/vnd.ms-excel,与.xls一致,无法限制,因此更改为:
|
|
|
+ if (!isType || file.name.indexOf('.csv') >= 0) {
|
|
|
if (tip != 0) {
|
|
|
this.$message.error('请上传正确的格式!')
|
|
|
}
|
|
|
- return isType
|
|
|
+ return isType && !(file.name.indexOf('.csv') >= 0)
|
|
|
}
|
|
|
-
|
|
|
// 文件大小
|
|
|
const isLt2M = file.size / 1024 / 1024 < this.fileSize
|
|
|
if (!isLt2M) {
|
|
@@ -192,10 +247,12 @@ export default {
|
|
|
.upload-file{
|
|
|
float: left;
|
|
|
overflow: hidden;
|
|
|
+ height: 80px;
|
|
|
/* you can make up upload button and sample style by using stylesheets */
|
|
|
.ant-upload-select-picture-card i {
|
|
|
font-size: 32px;
|
|
|
color: #999;
|
|
|
+ margin-top: 9px;
|
|
|
}
|
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
|
|
margin-top: 8px;
|
|
@@ -207,11 +264,16 @@ export default {
|
|
|
padding: 4px 0;
|
|
|
}
|
|
|
}
|
|
|
+ .ant-upload-list-picture-card-container{
|
|
|
+ height: 80px;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
.ant-upload.ant-upload-select-picture-card,
|
|
|
.ant-upload-list-picture-card .ant-upload-list-item{
|
|
|
width:80px;
|
|
|
height:80px;
|
|
|
padding: 4px;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
.ant-upload-list-item-info{
|
|
|
padding: 0 22px 0 4px;
|