init

2026-08-12 17:19:37 +08:00
commit e73d22744e
131 changed files with 66997 additions and 0 deletions
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <ul class="public-upload-img fix">
+            <li v-for="(item, index) in uploadList">
+                <template v-if="item.status === 'finished'">
+                    <img :src="item.url" alt="" />
+                    <div class="upload-list-cover">
+                        <Icon type="ios-eye-outline" size="24" title="预览图片" @click.native="handleView(item.url)"></Icon>
+                        <Icon size="24" class="ml-10" title="删除图片" type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                    </div>
+                </template>
+                <template v-else>
+                    <Progress v-if="item.showProgress" :percent="item.percentage" class="mt-24" hide-info></Progress>
+                </template>
+            </li>
+            <li class="add-li">
+                <Upload
+                    ref="upload"
+                    :show-upload-list="false"
+                    :on-success="handleSuccess"
+                    :format="['jpg', 'jpeg', 'png', 'gif']"
+                    accept="image/gif,image/jpeg,image/jpg,image/png"
+                    :max-size="2048"
+                    :on-format-error="handleFormatError"
+                    :on-exceeded-size="handleMaxSize"
+                    :default-file-list="defaultList"
+                    type="drag"
+                    :action="uploadUrl"
+                >
+                    <div class="add-box">
+                        <Icon type="ios-add" size="50"></Icon>
+                    </div>
+                </Upload>
+            </li>
+        </ul>
+        <Modal title="图片预览" v-model="visible" footer-hide>
+            <img :src="imgName" v-if="visible" style="width: 100%" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        baseUrl: { type: String, default: "" },
+        imgList: { type: Array, default: [] },
+        uploadUrl: { type: String, default: "" },
+    },
+    data() {
+        return {
+            imgName: "",
+            visible: false,
+            uploadList: [],
+            defaultList: [],
+        };
+    },
+    created() {
+        let arr = [];
+
+        this.imgList.forEach(element => {
+            arr.push({
+                name: "",
+                url: this.baseUrl + element,
+            });
+        });
+        this.defaultList = arr;
+    },
+    mounted() {
+        console.log(this.$refs.upload.fileList);
+        this.uploadList = this.$refs.upload.fileList;
+    },
+    methods: {
+        handleView(name) {
+            this.imgName = name;
+            this.visible = true;
+        },
+        handleRemove(index) {
+            this.$refs.upload.fileList.splice(index, 1);
+            this.imgList.splice(index, 1);
+        },
+        handleSuccess(res, file) {
+            console.log(res, file);
+            file.url = this.baseUrl + res.data;
+            this.imgList.push(res.data);
+        },
+        handleFormatError(file) {
+            console.error(file);
+        },
+        handleMaxSize(file) {
+            this.$Notice.warning({
+                title: "图片过大",
+                desc: "图片最大上传大小为20M.",
+            });
+        },
+    },
+};
+</script>
+
+<style>
+</style>