bri-components 1.5.22 → 1.6.1

package/src/components/controls/base/BriUpload/BriUploadImage.vue

@@ -1,377 +1,430 @@
-<template>
-    <div class="BriUploadImage">
-        <div
-            class="BriUploadImage-set"
-            ref="viewerImage"
-        >
-            <div
-                v-if="value[propsObj._key] || propsObj._default || percent"
-                :class="['BriUploadImage-set-img', isAvatar ? 'BriUploadImage-set-avatar' : '']"
-                :style="{
-                    backgroundImage: `url(${$imageResize(value[propsObj._key] || propsObj._default, imageResizeConfig)})`,
-                    borderRadius: propsObj.radius ? '50%' : ''
-                }"
-            >
-                <img
-                    :data-original="value[propsObj._key]"
-                    style="display:none"
-                >
-                <div
-                    v-if="value[propsObj._key] && propsObj._canAction"
-                    class="BriUploadImage-set-action"
-                >
-                    <Icon
-                        class="BriUploadImage-set-img-action"
-                        type="ios-eye-outline"
-                        size="16"
-                        @click.native="handlePreview"
-                    ></Icon>
-                    <Icon
-                        class="BriUploadImage-set-img-action"
-                        type="ios-trash-outline"
-                        size="16"
-                        @click.native="handleRemove"
-                    ></Icon>
-                </div>
-                <!-- 上传进度 -->
-                <div
-                    v-if="percent"
-                    class="BriUploadImage-set-img-circle"
-                >
-                    <i-circle
-                        class="circle"
-                        :percent="percent"
-                        :stroke-color="percentColor"
-                    >
-                        <Icon
-                            v-if="percent == 100"
-                            type="ios-checkmark"
-                        ></Icon>
-                        <span v-else>{{ percent }}%</span>
-                    </i-circle>
-                </div>
-
-            </div>
-            <div class="wrap">
-                <Button type="default">点击上传</Button>
-                <input
-                    id="fileupload"
-                    class="file"
-                    :accept="acceptType"
-                    :type="inputType"
-                    @change="setImage"
-                />
-            </div>
-        </div>
-
-        <!-- 修改头像模态框 -->
-        <dsh-modal
-            v-model="avatarModal"
-            mode="custom"
-            :propsObj="modalPropsObj"
-            @on-visible-change="visibleChange"
-        >
-            <dsh-cropper
-                class="BriUploadImage-cropper"
-                ref="cropper"
-                :src="imgSrc"
-                alt="Source Image"
-                :cropmove="cropImage"
-            ></dsh-cropper>
-
-            <dsh-buttons
-                class="bri-modal-footer"
-                :list="$getOperationList(['cancel', 'confirm'])"
-                @click="$dispatchEvent($event)"
-            ></dsh-buttons>
-        </dsh-modal>
-    </div>
-</template>
-
-<script>
-    import uploadMixin from "./uploadMixin.js";
-    import Viewer from "viewerjs";
-
-    export default {
-        name: "BriUploadImage",
-        mixins: [
-            uploadMixin
-        ],
-        components: {},
-        props: {
-            value: Object,
-            propsObj: Object,
-            // 上传的是阿里云还是本地
-            requestOssType: {
-                type: String,
-                default: "default"
-            },
-            isAvatar: {
-                type: Boolean,
-                default: false
-            },
-            // 阿里云上传方式
-            ossType: {
-                type: String,
-                default: "binaryMultipartUpload"
-            }
-        },
-        data () {
-            return {
-                operationMap: {
-                    cancel: {
-                        name: "取消",
-                        type: "cancel",
-                        btnType: "cancel",
-                        event: "cancelAvatarModal"
-                    },
-                    confirm: {
-                        name: "确认",
-                        type: "confirm",
-                        btnType: "primary",
-                        event: "photoSubmit"
-                    }
-                },
-                // 头像
-                avatarModal: false,
-                inputType: "file",
-                imgSrc: "",
-                cropImg: ""
-            };
-        },
-        computed: {
-            modalPropsObj () {
-                return {
-                    title: this.propsObj._name || "修改头像",
-                    class: "bri-modal",
-                    width: 450
-                };
-            },
-            imageResizeConfig () {
-                return this.propsObj._imageResizeConfig || {
-                    m: "fixed",
-                    w: 100,
-                    h: 100
-                };
-            },
-            finalRequestOssType () {
-                return this.propsObj._requestOssType || this.requestOssType || "default";
-            },
-            acceptType () {
-                return this.propsObj._acceptType || "*";
-            }
-        },
-        created () {
-        },
-        methods: {
-            // 打开修改头像
-            openAvatar () {
-                this.avatarModal = true;
-            },
-            // 关闭修改头像
-            cancelAvatarModal () {
-                this.avatarModal = false;
-                // this.inputType = "file";
-            },
-            // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
-            visibleChange (bool) {
-                if (!bool) {
-                    this.inputType = "file";
-                }
-            },
-            setImage (e) {
-                if (e.target.files.length != 0) {
-                    const file = e.target.files[0];
-                    if (!file.type.includes("image/")) {
-                        this.$Message.error("请选择一张图片");
-                        return;
-                    }
-                    if (typeof FileReader === "function") {
-                        const reader = new FileReader();
-                        if (this.propsObj._kind == "uploadImage" && !this.propsObj.cropper) {
-                            reader.onload = (event) => {
-                                let data = event.target.result;
-                                this.inputType = "text";
-                                if (this.finalRequestOssType === "local") {
-                                    // base64转文件
-                                    const imgFile = this.dataURLtoFile(data, "");
-                                    this.handlePost(imgFile);
-                                } else {
-                                    data = data.split(",")[1];
-                                    let dataBuffer = Buffer.from(data, "base64");
-                                    this.handlePost(dataBuffer);
-                                }
-                            };
-                            reader.readAsDataURL(file);
-                        } else {
-                            reader.onload = (event) => {
-                                this.imgSrc = event.target.result;
-                                // rebuild cropperjs with the updated source
-                                this.$refs.cropper.replace(event.target.result);
-                                this.inputType = "text";
-                            };
-                            reader.readAsDataURL(file);
-                            this.avatarModal = true;
-                        }
-                    } else {
-                        alert("Sorry, FileReader API not supported");
-                    }
-                }
-            },
-            cropImage () {
-                // get image data for post processing, e.g. upload or setting image src
-                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
-            },
-            // 获取裁剪后的图片，转成file
-            photoSubmit () {
-                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
-                if (this.finalRequestOssType === "local") {
-                    // base64转文件
-                    const imgFile = this.dataURLtoFile(this.cropImg, "");
-                    this.handlePost(imgFile);
-                } else {
-                    let data = this.cropImg;
-                    data = data.split(",")[1];
-
-                    let dataBuffer = Buffer.from(data, "base64");
-                    this.handlePost(dataBuffer);
-                }
-
-                this.cancelAvatarModal();
-            },
-            // 将图片Base64 转成文件
-            dataURLtoFile (dataurl, filename) {
-                // 获取文件扩展名称
-                let arr = dataurl.split(",");
-                let mime = arr[0].match(/:(.*?);/)[1];
-                let extension = mime.split("/")[1];
-                let bstr = atob(arr[1]);
-                let n = bstr.length;
-                let u8arr = new Uint8Array(n);
-                while (n--) {
-                    u8arr[n] = bstr.charCodeAt(n);
-                }
-                return new File([u8arr], `${filename}.${extension}`, {type: mime});
-            },
-            successCb (response, res) {
-                this.value[this.propsObj._key] = res.data.downloadUrl;
-                this.$emit("change", res);
-            },
-            handleError (err) {
-                alert(err);
-            },
-            // 点击文件预览
-            handlePreview (file) {
-                let viewerImage = this.$refs.viewerImage;
-                let viewer = new Viewer(viewerImage, {
-                    url: "data-original",
-                    hidden: function () {
-                        viewer.destroy();
-                    },
-                    loop: false,
-                    zIndex: 2147483647
-                });
-                viewer.show();
-            },
-            // 点击文件删除 - fileList服务器的数据列表
-            handleRemove (file) {
-                this.inputType = "file"; // 删除后可以重新上传
-                this.value[this.propsObj._key] = "";
-                this.change(this.value);
-            },
-            change (...params) {
-                this.$emit("change", ...params);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriUploadImage {
-        position: relative;
-
-        &-set {
-            width: 100%;
-
-            &-img {
-                width: 100px;
-                height: 100px;
-                float: left;
-                background-repeat: no-repeat;
-                background-position: center;
-                background-size: contain;
-                background-color: #fff;
-                border: 1px solid @borderColor;
-                border-radius: 0px;
-                position: relative;
-                overflow: hidden;
-
-                &-action {
-                    color: @themeColor;
-                    cursor: pointer;
-                }
-
-                &-circle {
-                    position: absolute;
-                    top: 0px;
-                    bottom: 0px;
-                    left: 0px;
-                    right: 0px;
-                    background-color: #f4f5fa;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    .circle {
-                        width: 50px !important;
-                        height: 50px !important;
-                    }
-
-                    i {
-                        color: #5cb85c;
-                        font-size: 40px;
-                    }
-                }
-            }
-
-            &-avatar {
-                background-size: cover;
-            }
-
-            .wrap {
-                width: 100px;
-                height: 32px;
-                position: relative;
-                overflow: hidden;
-                display: inline-block;
-                line-height: 18px;
-                text-align: center;
-                vertical-align: middle;
-                cursor: pointer;
-
-                button {
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                }
-
-                .file {
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    margin: 0;
-                    border: solid transparent;
-                    opacity: 0;
-                    filter: alpha(opacity=0);
-                    cursor: pointer;
-                }
-            }
-        }
-
-        &-cropper {
-            width: 400px;
-            height: 400px;
-            margin: 0 auto;
-        }
-    }
-</style>
+<template>
+    <div class="BriUploadImage">
+        <div
+            ref="viewerImage"
+            class="BriUploadImage-set"
+        >
+            <div
+                v-if="curVal || propsObj._default || percent"
+                :class="{
+                    'BriUploadImage-set-img': true,
+                    'BriUploadImage-set-avatar': isAvatar
+                }"
+                :style="{
+                    backgroundImage: `url(${$imageResize(curVal || propsObj._default, imageResizeConfig)})`,
+                    borderRadius: propsObj.radius ? '50%' : ''
+                }"
+            >
+                <img
+                    :data-original="curVal"
+                    style="display:none"
+                >
+                <div
+                    v-if="curVal && canAction"
+                    class="BriUploadImage-set-action"
+                >
+                    <Icon
+                        class="BriUploadImage-set-img-action"
+                        type="ios-eye-outline"
+                        size="16"
+                        @click.native="handlePreview"
+                    ></Icon>
+                    <Icon
+                        class="BriUploadImage-set-img-action"
+                        type="ios-trash-outline"
+                        size="16"
+                        @click.native="handleRemove"
+                    ></Icon>
+                </div>
+
+                <!-- 上传进度 -->
+                <div
+                    v-if="percent"
+                    class="BriUploadImage-set-img-circle"
+                >
+                    <i-circle
+                        class="circle"
+                        :percent="percent"
+                        :stroke-color="percentColor"
+                    >
+                        <Icon
+                            v-if="percent == 100"
+                            type="ios-checkmark"
+                        ></Icon>
+                        <span v-else>{{ percent }}%</span>
+                    </i-circle>
+                </div>
+            </div>
+
+            <div class="wrap">
+                <Button type="default">点击上传</Button>
+                <input
+                    id="fileupload"
+                    class="file"
+                    :accept="acceptType"
+                    :type="inputType"
+                    @change="setImage"
+                />
+            </div>
+        </div>
+
+        <!-- 修改头像模态框 -->
+        <dsh-modal
+            v-model="avatarModal"
+            mode="custom"
+            :propsObj="modalPropsObj"
+            @on-visible-change="visibleChange"
+        >
+            <dsh-cropper
+                ref="cropper"
+                class="BriUploadImage-cropper"
+                :src="imgSrc"
+                alt="Source Image"
+                :cropmove="cropImage"
+            ></dsh-cropper>
+
+            <dsh-buttons
+                class="bri-modal-footer"
+                :list="$getOperationList(['cancel', 'confirm'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import uploadMixin from "./uploadMixin.js";
+    import Viewer from "viewerjs";
+
+    export default {
+        name: "BriUploadImage",
+        mixins: [
+            uploadMixin
+        ],
+        components: {},
+        props: {
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            isAvatar: {
+                type: Boolean,
+                default: false
+            },
+            // 上传的是阿里云还是本地
+            requestOssType: {
+                type: String,
+                default: "default",
+                validator (val) {
+                    // "default"代表阿里云
+                    return ["default", "local"].includes(val);
+                }
+            },
+            // 阿里云上传方式
+            ossType: {
+                type: String,
+                default: "binaryMultipartUpload"
+            }
+        },
+        data () {
+            return {
+                inputType: "file",
+
+                // 头像
+                avatarModal: false,
+                imgSrc: "",
+                cropImg: "",
+
+                operationMap: {
+                    cancel: {
+                        name: "取消",
+                        type: "cancel",
+                        btnType: "cancel",
+                        event: "closeAvatarModal"
+                    },
+                    confirm: {
+                        name: "确认",
+                        type: "confirm",
+                        btnType: "primary",
+                        event: "submitCropImage"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    ...this.propsObj
+                };
+            },
+            controlKey () {
+                return this.selfPropsObj._key;
+            },
+            controlName () {
+                return this.selfPropsObj._name;
+            },
+            // 使用操作图标
+            canAction () {
+                return this.selfPropsObj._canAction;
+            },
+            imageResizeConfig () {
+                return this.selfPropsObj._imageResizeConfig || {
+                    m: "fixed",
+                    w: 100,
+                    h: 100
+                };
+            },
+            finalRequestOssType () {
+                return this.selfPropsObj._requestOssType || this.requestOssType;
+            },
+            acceptType () {
+                return this.selfPropsObj._acceptType || "*";
+            },
+
+            modalPropsObj () {
+                return {
+                    title: this.controlName || "修改头像",
+                    class: "bri-modal",
+                    width: 450
+                };
+            },
+
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
+                }
+            }
+        },
+        created () {},
+        methods: {
+            setImage (e) {
+                if (e.target.files.length) {
+                    const file = e.target.files[0];
+                    if (!file.type.includes("image/")) {
+                        this.$Message.error("请选择一张图片");
+                    }
+                    else if (typeof FileReader !== "function") {
+                        this.$Message.error("Sorry, FileReader API not supported");
+                    }
+                    else {
+                        const reader = new FileReader();
+                        if (this.propsObj._kind === "uploadImage" && !this.propsObj.cropper) {
+                            reader.onload = (event) => {
+                                this.inputType = "text";
+                                this.dealPostImage(event.target.result); // event.target.result是base64格式
+                            };
+                            reader.readAsDataURL(file);
+                        }
+                        // 使用裁剪
+                        else {
+                            reader.onload = (event) => {
+                                this.inputType = "text";
+                                this.imgSrc = event.target.result;
+                                this.$refs.cropper.replace(event.target.result); // event.target.result是base64格式
+                            };
+                            reader.readAsDataURL(file);
+
+                            this.openAvatarModal();
+                        }
+                    }
+                }
+            },
+            // 提交裁剪后的图片
+            submitCropImage () {
+                this.cropImage();
+                this.dealPostImage(this.cropImg);
+
+                this.closeAvatarModal();
+            },
+
+            // 获取裁剪的图片
+            cropImage () {
+                // get image data for post processing, e.g. upload or setting image src
+                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL(); // base64格式
+            },
+            // 处理图片的提交
+            dealPostImage (data) {
+                // local好像是minio在用
+                if (this.finalRequestOssType === "local") {
+                    // base64转文件
+                    // {
+                    //     lastModified: 1752065308269
+                    //     name: ".png"
+                    //     size: 528557
+                    //     type: "image/png"
+                    //     webkitRelativePath: ""
+                    // }
+                    const imgFile = this.dataURLtoFile(data, "");
+                    this.handlePost(imgFile);
+                    // console.dir(imgFile); // object类型
+                } else {
+                    const dataBuffer = Buffer.from(data.split(",")[1], "base64");
+                    this.handlePost(dataBuffer);
+                    // console.dir(dataBuffer); // object类型
+                }
+            },
+            // 将图片Base64 转成文件
+            dataURLtoFile (dataurl, filename) {
+                // 获取文件扩展名称
+                let arr = dataurl.split(",");
+                let mime = arr[0].match(/:(.*?);/)[1];
+                let extension = mime.split("/")[1];
+                let bstr = atob(arr[1]);
+                let n = bstr.length;
+                let u8arr = new Uint8Array(n);
+                while (n--) {
+                    u8arr[n] = bstr.charCodeAt(n);
+                }
+                return new File([u8arr], `${filename}.${extension}`, { type: mime });
+            },
+
+            successCb (response, res) {
+                this.curVal = res.data.downloadUrl;
+                this.$emit("change", res);
+            },
+            handleError (err) {
+                alert(err);
+            },
+
+            // 点击文件预览
+            handlePreview (file) {
+                let viewerImage = this.$refs.viewerImage;
+                let viewer = new Viewer(viewerImage, {
+                    url: "data-original",
+                    hidden: function () {
+                        viewer.destroy();
+                    },
+                    loop: false,
+                    zIndex: 2147483647
+                });
+                viewer.show();
+            },
+            // 点击文件删除 - fileList服务器的数据列表
+            handleRemove (file) {
+                this.inputType = "file"; // 删除后可以重新上传
+                this.curVal = "";
+                this.change(this.value);
+            },
+            change (...params) {
+                this.$emit("change", ...params);
+            },
+
+            // 打开修改头像
+            openAvatarModal () {
+                this.avatarModal = true;
+            },
+            // 关闭修改头像
+            closeAvatarModal () {
+                this.avatarModal = false;
+            },
+            // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
+            visibleChange (bool) {
+                if (!bool) {
+                    this.inputType = "file";
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriUploadImage {
+        position: relative;
+
+        &-set {
+            width: 100%;
+
+            &-img {
+                width: 100px;
+                height: 100px;
+                float: left;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: contain;
+                background-color: #fff;
+                border: 1px solid @borderColor;
+                border-radius: 0px;
+                position: relative;
+                overflow: hidden;
+
+                &-action {
+                    color: @themeColor;
+                    cursor: pointer;
+                }
+
+                &-circle {
+                    position: absolute;
+                    top: 0px;
+                    bottom: 0px;
+                    left: 0px;
+                    right: 0px;
+                    background-color: #f4f5fa;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .circle {
+                        width: 50px !important;
+                        height: 50px !important;
+                    }
+
+                    i {
+                        color: #5cb85c;
+                        font-size: 40px;
+                    }
+                }
+            }
+
+            &-avatar {
+                background-size: cover;
+            }
+
+            .wrap {
+                width: 100px;
+                height: 32px;
+                position: relative;
+                overflow: hidden;
+                display: inline-block;
+                line-height: 18px;
+                text-align: center;
+                vertical-align: middle;
+                cursor: pointer;
+
+                button {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                }
+
+                .file {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    margin: 0;
+                    border: solid transparent;
+                    opacity: 0;
+                    filter: alpha(opacity=0);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        &-cropper {
+            width: 400px;
+            height: 400px;
+            margin: 0 auto;
+        }
+    }
+</style>