bri-components 1.6.4 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.4",
+    "version": "1.6.6",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

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

@@ -205,7 +205,7 @@
             handleEditName (fileItem) {
                 this.$https({
                     url: {
-                        ...this.computedUrlModule,
+                        ...this.finalUrlModule,
                         name: "updateFileName"
                     },
                     params: fileItem
@@ -231,18 +231,18 @@
                 }
             },
 
-            handleChange (e) {
-                if (e.target.files) {
-                    this.dealUpload(e.target.files);
+            handleChange (event) {
+                if (event.target.files) {
+                    this.dealUpload(event.target.files);
                     this.$refs.input.value = null;
                 }
             },
-            handleDrop (e) {
+            handleDrop (event) {
                 this.dragOver = false;
-                this.dealUpload(e.dataTransfer.files);
+                this.dealUpload(event.dataTransfer.files);
             },
-            handlePaste (e) {
-                this.dealUpload(e.clipboardData.files);
+            handlePaste (event) {
+                this.dealUpload(event.clipboardData.files);
             },
             dealUpload (files) {
                 if (!this.disabled) {

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

@@ -5,14 +5,14 @@
             class="BriUploadImage-set"
         >
             <div
-                v-if="curVal || propsObj._default || percent"
+                v-if="curVal || selfPropsObj._default || percent"
                 :class="{
                     'BriUploadImage-set-img': true,
                     'BriUploadImage-set-avatar': isAvatar
                 }"
                 :style="{
-                    backgroundImage: `url(${$imageResize(curVal || propsObj._default, imageResizeConfig)})`,
-                    borderRadius: propsObj.radius ? '50%' : ''
+                    backgroundImage: `url(${$imageResize(curVal || selfPropsObj._default, imageResizeConfig)})`,
+                    borderRadius: useBorderRadius ? '50%' : ''
                 }"
             >
                 <img
@@ -60,10 +60,10 @@
                 <Button type="default">点击上传</Button>
                 <input
                     id="fileupload"
-                    class="file"
-                    :accept="acceptType"
-                    :type="inputType"
-                    @change="setImage"
+                    class="wrap-input"
+                    :accept="accept"
+                    :type="uploadType"
+                    @change="handleChange"
                 />
             </div>
         </div>
@@ -76,7 +76,7 @@
             @on-visible-change="visibleChange"
         >
             <dsh-cropper
-                ref="cropper"
+                ref="cropperDom"
                 class="BriUploadImage-cropper"
                 :src="imgSrc"
                 alt="Source Image"
@@ -114,30 +114,11 @@
                 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",
+                uploadType: "file",
 
                 // 头像
                 avatarModal: false,
@@ -163,6 +144,14 @@
         computed: {
             selfPropsObj () {
                 return {
+                    _accept: [],
+                    _isAvatar: false, // 是否是头像
+                    _canAction: false, // 是否使用操作图标
+                    _cropper: false, // 使用裁剪
+                    _useBorderRadius: false, // 用圆角
+                    _imageResizeConfig: undefined,
+                    _aliOssType: "binaryMultipartUpload", // 阿里云上传方式
+
                     ...this.propsObj
                 };
             },
@@ -172,10 +161,21 @@
             controlName () {
                 return this.selfPropsObj._name;
             },
-            // 使用操作图标
+            accept () {
+                return this.selfPropsObj._accept.map(type => `.${type}`).join() || "*";
+            },
+            isAvatar () {
+                return this.selfPropsObj._isAvatar;
+            },
             canAction () {
                 return this.selfPropsObj._canAction;
             },
+            isCropper () {
+                return this.selfPropsObj._cropper;
+            },
+            useBorderRadius () {
+                return this.selfPropsObj._useBorderRadius;
+            },
             imageResizeConfig () {
                 return this.selfPropsObj._imageResizeConfig || {
                     m: "fixed",
@@ -183,12 +183,6 @@
                     h: 100
                 };
             },
-            finalRequestOssType () {
-                return this.selfPropsObj._requestOssType || this.requestOssType;
-            },
-            acceptType () {
-                return this.selfPropsObj._acceptType || "*";
-            },
 
             modalPropsObj () {
                 return {
@@ -209,73 +203,90 @@
         },
         created () {},
         methods: {
-            setImage (e) {
-                if (e.target.files.length) {
-                    const file = e.target.files[0];
+            // 点击文件预览
+            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.uploadType = "file"; // 删除后可以重新上传
+                this.curVal = "";
+                this.change(this.value);
+            },
+            change (...params) {
+                this.$emit("change", ...params);
+            },
+
+            handleChange (event) {
+                if (event.target.files.length) {
+                    const file = event.target.files[0];
+
                     if (!file.type.includes("image/")) {
                         this.$Message.error("请选择一张图片");
                     }
                     else if (typeof FileReader !== "function") {
-                        this.$Message.error("Sorry, FileReader API not supported");
+                        this.$Message.error("Sorry, FileReader API not supported!");
                     }
                     else {
                         const reader = new FileReader();
-                        if (this.propsObj._kind === "uploadImage" && !this.propsObj.cropper) {
+                        // 使用裁剪
+                        if (this.isCropper) {
                             reader.onload = (event) => {
-                                this.inputType = "text";
-                                this.dealPostImage(event.target.result); // event.target.result是base64格式
+                                this.uploadType = "text";
+                                this.imgSrc = event.target.result;
+                                this.$refs.cropperDom.replace(event.target.result); // event.target.result是base64格式
                             };
                             reader.readAsDataURL(file);
+
+                            this.openAvatarModal();
                         }
-                        // 使用裁剪
                         else {
                             reader.onload = (event) => {
-                                this.inputType = "text";
-                                this.imgSrc = event.target.result;
-                                this.$refs.cropper.replace(event.target.result); // event.target.result是base64格式
+                                this.uploadType = "text";
+                                this.dealPostImage(event.target.result); // event.target.result是base64格式
                             };
                             reader.readAsDataURL(file);
-
-                            this.openAvatarModal();
                         }
                     }
                 }
             },
             // 提交裁剪后的图片
             submitCropImage () {
-                this.cropImage();
-                this.dealPostImage(this.cropImg);
+                this.dealPostImage(this.$refs.cropperDom.getCroppedCanvas().toDataURL()); // base64格式
 
                 this.closeAvatarModal();
             },
+            // 处理图片的提交
+            dealPostImage (fileData) {
+                this.handlePost((ossType) => {
+                    return ossType === "local"
+                        ? this.dataURLtoFile(fileData, "") // 本地上传，将图片Base64转成文件
+                        : Buffer.from(fileData.split(",")[1], "base64"); // 阿里上传，object类型
+                });
+            },
+            successCb (response, res) {
+                this.curVal = res.data.downloadUrl;
+                this.$emit("change", res);
+            },
+            handleError (err) {
+                alert(err);
+            },
 
             // 获取裁剪的图片
             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类型
-                }
+                this.cropImg = this.$refs.cropperDom.getCroppedCanvas().toDataURL(); // base64格式
             },
-            // 将图片Base64 转成文件
+            // 将图片Base64转成文件
             dataURLtoFile (dataurl, filename) {
                 // 获取文件扩展名称
                 let arr = dataurl.split(",");
@@ -287,38 +298,15 @@
                 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);
+                return new File([u8arr], `${filename}.${extension}`, { type: mime });
+                // {
+                //     lastModified: 1752065308269
+                //     name: ".png"
+                //     size: 528557
+                //     type: "image/png"
+                //     webkitRelativePath: ""
+                // }
             },
 
             // 打开修改头像
@@ -332,7 +320,7 @@
             // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
             visibleChange (bool) {
                 if (!bool) {
-                    this.inputType = "file";
+                    this.uploadType = "file";
                 }
             }
         }
@@ -347,9 +335,9 @@
             width: 100%;
 
             &-img {
+                float: left;
                 width: 100px;
                 height: 100px;
-                float: left;
                 background-repeat: no-repeat;
                 background-position: center;
                 background-size: contain;
@@ -360,7 +348,9 @@
                 overflow: hidden;
 
                 &-action {
+                    font-weight: 600;
                     color: @themeColor;
+                    // color: #ffffff;
                     cursor: pointer;
                 }
 
@@ -408,7 +398,7 @@
                     left: 0;
                 }
 
-                .file {
+                &-input {
                     position: absolute;
                     bottom: 0;
                     left: 0;

package/src/components/controls/base/BriUpload/uploadMixin.js

@@ -4,24 +4,7 @@ const minio = require("minio");
 const stream = require("stream");
 
 export default {
-    props: {
-        groupKey: {
-            type: String
-        },
-        urlModule: {
-            type: Object,
-            default: function () {
-                return {
-                    module: "file",
-                    name: "ossToken"
-                };
-            }
-        },
-        ossType: {
-            type: String,
-            default: "multipartUpload"
-        }
-    },
+    props: {},
     data () {
         return {
             percent: 0,
@@ -30,18 +13,22 @@ export default {
     },
     created () { },
     computed: {
-        computedGroupKey () {
-            return this.propsObj.groupKey || this.groupKey;
+        finalUrlModule () {
+            return this.selfPropsObj.urlModule || {
+                module: "file",
+                name: "ossToken"
+            };
         },
-        computedUrlModule () {
-            return this.propsObj.urlModule || this.urlModule;
+        uploadGroupKey () {
+            return this.selfPropsObj.groupKey;
         },
-        computedOssType () {
-            return this.propsObj.ossType || this.ossType;
+        aliOssType () {
+            return this.selfPropsObj._aliOssType || "multipartUpload";
         },
         archiveKey () {
-            return this.propsObj._archiveKey || [];
+            return this.selfPropsObj._archiveKey || [];
         },
+
         percentColor () {
             return Number(this.percent) === 100 ? "#5cb85c" : "#6090ed";
         }
@@ -49,16 +36,22 @@ export default {
     methods: {
         handlePost (file, callback) {
             this.$https({
-                url: this.computedUrlModule,
+                url: this.finalUrlModule,
                 params: {},
                 callback: res => {
-                    this.inputType = "file";
+                    this.uploadType = "file";
+
+                    // BriUploadImage使用时，file参数是个函数
+                    if (typeof file === "function") {
+                        file = file(res.ossType);
+                    }
+
                     if (res.ossType === "ali-oss") {
                         // 上传到阿里云res
-                        if (this.computedOssType === "binaryMultipartUpload") {
+                        if (this.aliOssType === "binaryMultipartUpload") {
                             this.binaryMultipartUpload(file, res, callback);
                         }
-                        else if (this.computedOssType === "multipartUpload") {
+                        else if (this.aliOssType === "multipartUpload") {
                             this.multipartUpload(file, res, callback);
                         }
                     }
@@ -71,7 +64,6 @@ export default {
                     else {
                         console.log(`请开发这种类型‘${res.ossType}’的上传模式`);
                     }
-
                 }
             });
         },
@@ -84,7 +76,7 @@ export default {
                 headers: {
                     filetoken: res.filetoken,
                     filebody: JSON.stringify({
-                        groupKey: this.computedGroupKey,
+                        groupKey: this.uploadGroupKey,
                         archiveKey: this.archiveKey[this.archiveKey.length - 1]
                     })
                 },
@@ -186,7 +178,7 @@ export default {
                                 path: remoteName,
                                 bucket: res.ossConfig.bucket,
                                 filetoken: res.filetoken,
-                                groupKey: this.computedGroupKey,
+                                groupKey: this.uploadGroupKey,
                                 archiveKey: this.archiveKey[this.archiveKey.length - 1]
                             };
                             axios.post(res.ossHost + res.confirmPath, { ...callbackBody })
@@ -235,10 +227,9 @@ export default {
                 path: remoteName,
                 bucket: res.ossConfig.bucket,
                 filetoken: res.filetoken,
-                groupKey: this.computedGroupKey,
+                groupKey: this.uploadGroupKey,
                 archiveKey: this.archiveKey[this.archiveKey.length - 1]
             };
-
             let ossCallback = {
                 callbackUrl: res.ossHost + res.confirmPath,
                 callbackBodyType: "application/json",
@@ -258,31 +249,34 @@ export default {
                 refreshSTSTokenInterval: 3600 * 1000
             };
 
-            new Oss(newOss).multipartUpload(remoteName, file, {
-                progress: (percentage) => {
-                    this.inProgress(Number((percentage * 100).toFixed(1)));
-                    this.handleProgress && this.handleProgress(percentage, file);
-                },
-                headers: {
-                    "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
-                    "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
-                }
-            }).then(response => {
-                this.uploadSuccess = true;
-                this.percent = 100;
-                setTimeout(() => {
+            new Oss(newOss)
+                .multipartUpload(remoteName, file, {
+                    progress: (percentage) => {
+                        this.inProgress(Number((percentage * 100).toFixed(1)));
+                        this.handleProgress && this.handleProgress(percentage, file);
+                    },
+                    headers: {
+                        "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
+                        "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
+                    }
+                })
+                .then(response => {
+                    this.uploadSuccess = true;
+                    this.percent = 100;
+                    setTimeout(() => {
+                        this.uploadSuccess = false;
+                        this.percent = 0;
+                    }, 500);
+
+                    this.successCb && this.successCb(response, response.data, file);
+                    callback && callback(response.data);
+                })
+                .catch((err, response) => {
                     this.uploadSuccess = false;
                     this.percent = 0;
-                }, 500);
 
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch((err, response) => {
-                this.uploadSuccess = false;
-                this.percent = 0;
-
-                this.handleError && this.handleError(err, response, file);
-                callback && callback(err);
+                    this.handleError && this.handleError(err, response, file);
+                    callback && callback(err);
             });
         },
         // bri-upload-image 用的是这种方式
@@ -297,10 +291,9 @@ export default {
                 path: remoteName,
                 bucket: res.ossConfig.bucket,
                 filetoken: res.filetoken,
-                groupKey: this.computedGroupKey,
+                groupKey: this.uploadGroupKey,
                 archiveKey: this.archiveKey[this.archiveKey.length - 1]
             };
-
             let ossCallback = {
                 callbackUrl: res.ossHost + res.confirmPath,
                 callbackBodyType: "application/json",
@@ -320,41 +313,42 @@ export default {
                 refreshSTSTokenInterval: 3600 * 1000
             };
 
-            new Oss(newOss).multipartUpload(remoteName, file, {
-                progress: (percentage) => {
-                    this.inProgress(Number((percentage * 100).toFixed(1)));
-                    this.handleProgress && this.handleProgress(percentage, file);
-                },
-                headers: {
-                    "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
-                    "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
-                }
-            }).then(response => {
-                this.uploadSuccess = true;
-                this.percent = 100;
-                setTimeout(() => {
+            new Oss(newOss)
+                .multipartUpload(remoteName, file, {
+                    progress: (percentage) => {
+                        this.inProgress(Number((percentage * 100).toFixed(1)));
+                        this.handleProgress && this.handleProgress(percentage, file);
+                    },
+                    headers: {
+                        "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
+                        "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
+                    }
+                })
+                .then(response => {
+                    this.uploadSuccess = true;
+                    this.percent = 100;
+                    setTimeout(() => {
+                        this.uploadSuccess = false;
+                        this.percent = 0;
+                    }, 500);
+
+                    this.successCb && this.successCb(response, response.data, file);
+                    callback && callback(response.data);
+                })
+                .catch((err, response) => {
                     this.uploadSuccess = false;
                     this.percent = 0;
-                }, 500);
 
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch((err, response) => {
-                this.uploadSuccess = false;
-                this.percent = 0;
-
-                this.handleError && this.handleError(err, response, file);
-                callback && callback(err);
+                    this.handleError && this.handleError(err, response, file);
+                    callback && callback(err);
             });
         },
 
         // 处理上传进度
         inProgress (percent) {
-            if (percent === 100 && !this.uploadSuccess) {
-                this.percent = 99.9;
-            } else {
-                this.percent = percent;
-            }
+            this.percent = percent === 100 && !this.uploadSuccess
+                ? 99.9
+                : percent;
 
             if (this.percent >= 100) {
                 this.percent = 100;

package/src/components/controls/base/DshEditor.vue

@@ -106,7 +106,7 @@
                 let that = this;
                 let editor = new E(this.$refs.toolbar, this.$refs.editor);
                 editor.config.uploadImgShowBase64 = false; // base 64 存储图片
-                let url = this.$getRequests(this.computedUrlModule);
+                let url = this.$getRequests(this.finalUrlModule);
                 editor.config.uploadImgServer = `${location.origin}${config.apiUrl}${url}`;// 配置服务器端地址(自己更换为自己项目的服务器)
                 editor.config.uploadImgHeaders = this.propsObj._headers || { authtoken: sessionStorage.getItem("authtoken") }; // 自定义 header
                 editor.config.uploadFileName = "file_stream"; // 后端接受上传文件的参数名