图库上传bug

This commit is contained in:
duan
2024-08-07 11:44:05 +08:00
parent 5377a76365
commit 7f54c59092
4 changed files with 68 additions and 32 deletions

View File

@@ -36,7 +36,7 @@ export default {
dialogImageUrl: '', dialogImageUrl: '',
dialogVisible: false, dialogVisible: false,
fileList: [], fileList: [],
files: [], // files: [],
headers: { headers: {
'Authorization': getToken() 'Authorization': getToken()
} }
@@ -45,7 +45,13 @@ export default {
methods: { methods: {
handleSuccess(response, file, fileList) { handleSuccess(response, file, fileList) {
// console.log('上传成功', response) // console.log('上传成功', response)
this.files = response.data setTimeout(() => {
this.fileList.push({
url: response.data[0],
id: response.data.id
})
}, 100);
// this.files = response.data
this.$emit('success', response.data) this.$emit('success', response.data)
}, },
// 监听上传失败 // 监听上传失败
@@ -69,6 +75,9 @@ export default {
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
let arr = fileList.map(item => item.url) let arr = fileList.map(item => item.url)
// 删除数据
let index = this.fileList.findIndex(ele => ele.url == file.url)
this.fileList.splice(index, 1);
this.$emit('remove', arr) this.$emit('remove', arr)
}, },
clearFiles() { clearFiles() {
@@ -76,4 +85,11 @@ export default {
} }
} }
} }
</script> </script>
<style>
.el-upload-list__item {
transition: none;
}
</style>

View File

@@ -552,15 +552,20 @@ export default {
}, },
methods: { methods: {
successEvent(d) { successEvent(d) {
// 删除重复数据 if (this.$refs.uploadImg.fileList.length < 9) {
// let index = this.files.findIndex(ele => ele.name == file.name) d.forEach(item => {
// this.files.splice(index, 1); item.uid = item.id
d.forEach(item => { item.url = item.url
item.uid = item.id this.form.images.push(item.url);
item.url = item.url })
this.form.images.push(item.url); this.$refs.uploadImg.fileList.push(...d)
}) console.log(this.$refs.uploadImg.fileList, '调试1')
this.$refs.uploadImg.fileList.push(...d) } else {
this.$notify.error({
title: '错误',
message: '最多选择9张图片'
});
}
}, },
priceFormat(item, key) { priceFormat(item, key) {
const messageheight = 48; const messageheight = 48;
@@ -740,6 +745,7 @@ export default {
}, },
// 删除突破按 // 删除突破按
uploadRemove(arr) { uploadRemove(arr) {
this.form.images = arr; this.form.images = arr;
}, },
// 选择规格属性 // 选择规格属性

View File

@@ -4,14 +4,23 @@
<el-select v-model="value" placeholder="请选择" @change="changeEvent"> <el-select v-model="value" placeholder="请选择" @change="changeEvent">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span> <span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error " <template v-if="item.id != '681'">
@click="deleteType(item.id)"></i></span> <template v-if="item.id != '682'">
<template v-if="item.id != '699'">
<span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
@click="deleteType(item.id)"></i></span>
</template>
</template>
</template>
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button> <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
<el-button type="primary" @click="showUpload = true">新增图片</el-button> <el-button type="primary" @click="showUpload = true">新增图片</el-button>
<imageComponent @onSelectImage="onSelectImage" @getList="getList" @getlists="getlists" :list='dataImages'> <imageComponent @onSelectImage="onSelectImage" @getList="getList" :list='dataImages'>
</imageComponent> </imageComponent>
<el-pagination layout="prev, pager, next" :total="total" :page-size="20"
@current-change="handleCurrentChange">
</el-pagination>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="sumbit"> </el-button> <el-button type="primary" @click="sumbit"> </el-button>
@@ -27,7 +36,7 @@
</el-dialog> </el-dialog>
<!-- 新增图片 --> <!-- 新增图片 -->
<template v-if="showUpload"> <template v-if="showUpload">
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px" <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
@close="showUpload = false"> @close="showUpload = false">
<el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess" <el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple> :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
@@ -69,6 +78,7 @@ export default {
typedata: '', typedata: '',
showUpload: false, showUpload: false,
page: 1, page: 1,
total: 0
} }
}, },
mounted() { mounted() {
@@ -79,6 +89,10 @@ export default {
this.page = 1 this.page = 1
this.getList() this.getList()
}, },
handleCurrentChange(i) {
this.page = i
this.getList()
},
// 删除类型 // 删除类型
deleteType(id) { deleteType(id) {
this.$confirm('删除该类型, 是否继续?', '提示', { this.$confirm('删除该类型, 是否继续?', '提示', {
@@ -93,10 +107,10 @@ export default {
this.getType() this.getType()
this.$message({ this.$message({
type: 'success', type: 'success',
message: '删除成功!' message: res.msg
}); });
}).catch(() => { }).catch(() => {
this.$message.error(res.msg);
}); });
}, },
// 刷新列表数据 // 刷新列表数据
@@ -143,10 +157,7 @@ export default {
} }
} }
}, },
getlists() {
this.page++
this.getList()
},
sumbit() { sumbit() {
this.dialogVisible = false this.dialogVisible = false
this.$emit('successEvent', this.selectImage) this.$emit('successEvent', this.selectImage)
@@ -163,11 +174,8 @@ export default {
} }
const res = await getcommonpicture(obj); const res = await getcommonpicture(obj);
if (this.page == 1) { this.dataImages = res.data
this.dataImages = res.data this.total = res.count
} else {
this.dataImages.push(...res.data)
}
}, },
async getType(valueIndex) { async getType(valueIndex) {
const res = await getcommonCategor({ const res = await getcommonCategor({

View File

@@ -1,11 +1,17 @@
<template> <template>
<div> <div>
<ul class="ulStyle" v-infinite-scroll="load"> <ul class="ulStyle" >
<li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']" <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
@click="clickEvent(item)"> @click="clickEvent(item)">
<img :src="item.url" style="width: 100px;height: 100px;" alt=""> <img :src="item.url" style="width: 100px;height: 100px;" alt="">
<el-popconfirm title="确定删除吗?" class="show" @confirm="deleteEvent(item.id)"> <el-popconfirm title="确定删除吗?" class="show" @confirm="deleteEvent(item.id)">
<i class="el-icon-error buttonstyle" slot="reference"></i> <template v-if="item.pid != '681'">
<template v-if="item.pid != '682'">
<template v-if="item.pid != '699'">
<i class="el-icon-error buttonstyle" slot="reference"></i>
</template>
</template>
</template>
</el-popconfirm> </el-popconfirm>
</li> </li>
</ul> </ul>
@@ -25,9 +31,7 @@ export default {
}, },
methods: { methods: {
load() {
this.$emit('getlists')
},
clickEvent(d) { clickEvent(d) {
this.selectList = d this.selectList = d
this.$emit('onSelectImage', d) this.$emit('onSelectImage', d)
@@ -51,6 +55,7 @@ ul,
li { li {
list-style: none; list-style: none;
} }
.show { .show {
position: absolute; position: absolute;
right: -10px; right: -10px;
@@ -68,6 +73,7 @@ li {
background-color: #fff; background-color: #fff;
font-size: 20px; font-size: 20px;
} }
.ulStyle { .ulStyle {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;