|
|
@@ -0,0 +1,140 @@
|
|
|
+<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}">
|
|
|
+ <i slot="default" class="el-icon-plus" />
|
|
|
+ <div v-for="file in uploadFileList" slot="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)">
|
|
|
+ <i class="el-icon-delete" />
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getFileList,
|
|
|
+ uploadhimage
|
|
|
+ } from '@/api/fileInfo'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'PlUpload',
|
|
|
+ componentName: 'plUpload',
|
|
|
+ model: {
|
|
|
+ event: 'refreshModel'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ linkId: {
|
|
|
+ type: Number
|
|
|
+ }, // 关联主键ID
|
|
|
+ linkUrl: {
|
|
|
+ type: String
|
|
|
+ }, // 关联主键图片
|
|
|
+ limitCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 6
|
|
|
+ }, // 最大上传量
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }, // 是否编辑
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ } // 返回类型 1:返回fileListJson 2.最大上传量为1时返回url
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hideUpload: '',
|
|
|
+ fileList: [],
|
|
|
+ uploadFileList: [],
|
|
|
+ defFilterTypes: '.jpg, .jpeg, .png' // 默认上传类型
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ console.log('====initupload====')
|
|
|
+ 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 = []
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ this.$message.error(err.message)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ // console.log(tab, event)
|
|
|
+ },
|
|
|
+ // 上传列表
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ this.fileList = fileList
|
|
|
+ this.hideUpload = this.fileList.length >= this.limitCount
|
|
|
+ console.log(this.hideUpload)
|
|
|
+ this.refreshUploadFile()
|
|
|
+ },
|
|
|
+ // 移除
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ this.refreshUploadFile()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.hideUpload = this.uploadFileList.length >= this.limitCount
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ uploadFile(file) {
|
|
|
+ // 发起上传
|
|
|
+ uploadhimage(file).then((res) => {
|
|
|
+ const tempData = res.data
|
|
|
+ this.uploadFileList.push(tempData)
|
|
|
+ this.refreshUploadFile()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ refreshUploadFile() {
|
|
|
+ if (this.type === 2 && this.limitCount === 1) {
|
|
|
+ if (this.uploadFileList.length > 0) {
|
|
|
+ this.$emit('refreshModel', this.uploadFileList[0].url)
|
|
|
+ } else {
|
|
|
+ this.$emit('refreshModel', undefined)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$emit('refreshModel', JSON.stringify(this.uploadFileList))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ ::v-deep .hide .el-upload--picture-card {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+</style>
|