| | |
| | | <template> |
| | | <div class="my-upload"> |
| | | <div v-if="pictureList.length > 0" class="image-box"> |
| | | <div |
| | | v-for="image in pictureList" |
| | | :class="{ |
| | | 'image-box-item': true, |
| | | 'image-box-item-cover': isShowUpload |
| | | }" |
| | | > |
| | | <span |
| | | v-if="isShowUpload" |
| | | @click="handleDeletePicture(image)" |
| | | class="image-delete-icon el-icon-delete" |
| | | ></span> |
| | | <el-image |
| | | :key="image" |
| | | class="image-content" |
| | | :src="image" |
| | | :preview-src-list="[image]" |
| | | ></el-image> |
| | | <div v-for="image in pictureList" :class="{ |
| | | 'image-box-item': true, |
| | | 'image-box-item-cover': isShowUpload |
| | | }"> |
| | | <span v-if="isShowUpload" @click="handleDeletePicture(image)" |
| | | class="image-delete-icon el-icon-delete"></span> |
| | | <el-image :key="image" class="image-content" :src="setPicUrl(image)" |
| | | :preview-src-list="[image]"></el-image> |
| | | </div> |
| | | </div> |
| | | <el-upload |
| | | v-if="isShowUpload && pictureList.length < limit" |
| | | :file-list="fileList" |
| | | v-loading="loading" |
| | | element-loading-spinner="el-icon-loading" |
| | | element-loading-background="rgba(0, 0, 0, 0.8)" |
| | | action="" |
| | | :multiple="multiple" |
| | | :show-file-list="flag" |
| | | :limit="limit" |
| | | :list-type="listType" |
| | | :auto-upload="true" |
| | | :http-request="handleUpload" |
| | | style="margin-left: 14px" |
| | | > |
| | | <el-upload v-if="isShowUpload && pictureList.length < limit" :file-list="fileList" v-loading="loading" |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" action="" |
| | | :multiple="multiple" :show-file-list="flag" :limit="limit" :list-type="listType" :auto-upload="true" |
| | | :http-request="handleUpload" style="margin-left: 14px"> |
| | | <div class="upload-btn"> |
| | | <i class="el-icon-plus"></i> |
| | | <span>上传图片</span> |
| | |
| | | </template> |
| | | <script> |
| | | import imageManagement from "@/api/operate/imageManagement"; |
| | | import { FILE_ORIGINAL_PATH } from "@/utils"; |
| | | |
| | | export default { |
| | | data() { |
| | |
| | | formData.append('file', file); |
| | | imageManagement.importImage(formData) |
| | | .then((url) => { |
| | | // .then(({ url1, url2, url3, url4 }) => { |
| | | // const url = url1 ?? url2 ?? url3 ?? url4; |
| | | this.$emit('setPictureUrl', { url: url }); |
| | | this.loading = false; |
| | | }) |
| | |
| | | handleDeletePicture(imageUrl) { |
| | | this.$emit("delPictureUrl", { url: imageUrl }); |
| | | }, |
| | | setPicUrl(item) { |
| | | item = item.replace("[", "").replace("]", ""); |
| | | return FILE_ORIGINAL_PATH + item; |
| | | } |
| | | }, |
| | | props: { |
| | | pictureList: { |
| | |
| | | line-height: 22px; |
| | | } |
| | | } |
| | | |
| | | .image-box { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | |
| | | width: 100px; |
| | | height: 100px; |
| | | } |
| | | |
| | | :deep(.el-upload-list__item) { |
| | | width: 100px; |
| | | height: 100px; |