Browse Source

fix:上传bug修改

featrue-lingshan
LL 3 months ago
parent
commit
1243a4a82f
  1. 7
      src/views/modules/communityParty/promotion/components/promotionDialog.vue
  2. 87
      src/views/modules/plugins/rent/upload-image.vue

7
src/views/modules/communityParty/promotion/components/promotionDialog.vue

@ -17,7 +17,7 @@
<el-form-item label="上传照片" label-width="150px" prop="coverPic">
<div class="item_width_1">
<upload-image :defaultFileList="fileList" :is-in-preview="false" :limit="1" @change="onChangeFileList"
<upload-image :defaultFileList="fileList" :is-in-preview="false" :limit="2" @change="onChangeFileList"
@file-removed="removedImg" @preview="handleImgPreview"></upload-image>
</div>
</el-form-item>
@ -162,10 +162,7 @@ export default {
},
onChangeFileList(fileList) {
this.fileList = fileList.length > 0 ? fileList.map(item => ({
fileType: '0',
fileUrl: item.response.data.url
})) : []; // efileList
this.fileList = fileList.length > 0 ? fileList : [];
if (fileList.length > 0) {
this.formData.coverPic = fileList[0].response.data.url;
} else {

87
src/views/modules/plugins/rent/upload-image.vue

@ -1,29 +1,34 @@
<template>
<div class="upload-image" :class="isDetail? 'isDetail' : ''">
<el-upload :headers="$getElUploadHeaders()" list-type="picture-card"
:action="uploadUrl"
:data="{ customerId: customerId }"
:file-list="fileList"
:limit="limit"
<div class="upload-image" :class="isDetail ? 'isDetail' : ''">
<el-upload :headers="$getElUploadHeaders()" list-type="picture-card" :action="uploadUrl"
:data="{ customerId: customerId }" :file-list="fileList" :limit="limit"
:on-success="(res, file) => handleImgSuccess(res, file)"
:on-error="(res, file) => handleImgError(res, file)"
:on-remove="(res) => handleImgRemove(res)"
:on-exceed="(res) => handleImgExceed(res)"
:before-upload="(file) => beforeImgUpload(file)"
:on-error="(res, file) => handleImgError(res, file)" :on-remove="(res) => handleImgRemove(res)"
:on-exceed="(res) => handleImgExceed(res)" :before-upload="(file) => beforeImgUpload(file)"
accept="image/jpg,image/jpeg,image/png">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
<div slot="file" slot-scope="{file}" style="width: 100%; height: 100%;">
<div v-if="file.status !== 'uploading'" style="width: 100%; height: 100%;">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
<div v-else class="uploading-container"
v-loading="true"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)">
</div>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
@ -54,17 +59,17 @@ export default {
},
watch: {
defaultFileList: {
handler (newVal) {
handler(newVal) {
newVal.forEach(item => {
item.url = item.fileUrl
item.url = item.response.data.url
})
this.fileList = newVal
},
deep: true,
immediate: true
immediate: true
}
},
data () {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
@ -72,7 +77,7 @@ export default {
uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
customerId: localStorage.getItem("customerId"),
fileList: [],
imageUrls: []
imageUrls: [],
}
},
created() {
@ -94,17 +99,16 @@ export default {
this.dialogImageUrl = file.url
this.dialogVisible = true
} else this.$emit('preview', file)
},
beforeImgUpload(file) {
// console.log(file)
},
handleImgExceed(res) {
console.log(res)
this.$message({
type: "warning",
message: `文件数量最多不超过${this.limit}`,
type: "warning",
message: `文件数量最多不超过${this.limit}`,
})
},
handleImgRemove(file) {
@ -130,16 +134,37 @@ export default {
// min-width: 120px;
// height: 80px;
}
/deep/ .el-upload--picture-card {
width: 60px;
height: 60px;
line-height: 70px;
position: relative;
}
/deep/ .el-icon-plus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 60px;
height: 60px;
}
.isDetail ::v-deep .el-upload--picture-card {
display: none;
display: none;
}
.uploading-container {
width: 60px;
height: 60px;
border: 1px dashed #c0ccda;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
</style>

Loading…
Cancel
Save