bri-components 1.5.22 → 1.6.1

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

@@ -1,446 +1,453 @@
-import axios from "axios";
-import Oss from "ali-oss";
-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"
-        }
-    },
-    data () {
-        return {
-            percent: 0,
-            uploadSuccess: false
-        };
-    },
-    created () { },
-    computed: {
-        computedGroupKey () {
-            return this.propsObj.groupKey || this.groupKey;
-        },
-        computedUrlModule () {
-            return this.propsObj.urlModule || this.urlModule;
-        },
-        computedOssType () {
-            return this.propsObj.ossType || this.ossType;
-        },
-        archiveKey () {
-            return this.propsObj._archiveKey || [];
-        },
-        percentColor () {
-            if (Number(this.percent) === 100) {
-                return "#5cb85c";
-            } else {
-                return "#6090ed";
-            }
-        }
-    },
-    methods: {
-        handlePost (file, callback) {
-            this.$https({
-                url: this.computedUrlModule,
-                params: {
-                    token: this.$route.query && this.$route.query.token
-                },
-                callback: res => {
-                    this.inputType = "file";
-                    if (res.ossType === "ali-oss") {
-                        // 上传到阿里云res
-                        this[this.computedOssType](file, res, callback);
-                    } else if (res.ossType === "local") {
-                        this.localUpload(file, res, callback);
-                    } else if (res.ossType === "minio") {
-                        this.minioUpload(file, res, callback);
-                    } else {
-                        console.log(`请开发这种类型‘${res.ossType}’的上传模式`);
-                    }
-
-                }
-            });
-        },
-        localUpload (file, res, callback) {
-            let fileBody = {
-                groupKey: this.computedGroupKey,
-                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-            };
-
-            const url = `${res.ossHost}${res.uploadPath}`;
-            let formData = new FormData();
-            formData.append("file_stream", file);
-
-            axios.post(url, formData, {
-                headers: {
-                    filetoken: res.filetoken,
-                    filebody: JSON.stringify(fileBody)
-                },
-                onUploadProgress: progressEvent => {
-                    this.inProgress(Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1)));
-                }
-            }).then(response => {
-                this.uploadSuccess = true;
-                this.percent = 100;
-                setTimeout(() => {
-                    this.percent = 0;
-                    this.uploadSuccess = false;
-                }, 500);
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch(error => {
-                this.percent = 0;
-                this.uploadSuccess = false;
-                this.handleError && this.handleError(error, {}, file);
-                callback && callback(error);
-            });
-        },
-        multipartUpload (file, res, callback) {
-            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
-            let remoteName = `${this.randomTimeStampFn()}.${type}`;
-            let officeFileDefaultType = "";
-            if (!file.type) {
-                switch (type) {
-                case "xls":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "xlsx":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "doc":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "docx":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "ppt":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                case "pptx":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                default:
-                    officeFileDefaultType = "";
-                }
-            }
-
-            // 上传成功的回调参数
-            let callbackBody = {
-                name: file.name,
-                mimetype: file.type || officeFileDefaultType,
-                size: file.size,
-                path: remoteName,
-                bucket: res.ossConfig.bucket,
-                filetoken: res.filetoken,
-                groupKey: this.computedGroupKey,
-                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-            };
-
-            let ossCallback = {
-                callbackUrl: res.ossHost + res.confirmPath,
-                callbackBodyType: "application/json",
-                callbackBody: this.transferCallBody(callbackBody)
-            };
-
-            let newOss = {
-                ...res.ossConfig,
-                refreshSTSToken: async () => {
-                    // 向您搭建的STS服务获取临时访问凭证。
-                    return {
-                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
-                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
-                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
-                    };
-                },
-                // 刷新临时访问凭证的时间间隔，单位为毫秒。
-                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(() => {
-                    this.percent = 0;
-                    this.uploadSuccess = false;
-                }, 500);
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch((err, response) => {
-                this.percent = 0;
-                this.uploadSuccess = false;
-                this.handleError && this.handleError(err, response, file);
-                callback && callback(err);
-            });
-        },
-        minioUpload (file, res, callback) {
-            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
-            let remoteName = `${this.randomTimeStampFn()}.${type}`;
-            let officeFileDefaultType = "";
-            if (!file.type) {
-                switch (type) {
-                case "xls":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "xlsx":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "doc":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "docx":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "ppt":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                case "pptx":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                default:
-                    officeFileDefaultType = "";
-                }
-            }
-            const minioClient = new minio.Client({
-                endPoint: res.ossConfig.endPoint,
-                port: res.ossConfig.port,
-                useSSL: res.ossConfig.useSSL,
-                accessKey: window.config.minioAccessKey,
-                secretKey: window.config.minioSecretKey
-            });
-            // 获取文件类型及大小
-            const fileSize = file.size;
-            // 将文件转换为minio可接收的格式
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onloadend = e => {
-                const dataurl = e.target.result;
-                // base64转blob
-                const blob = this.toBlob(dataurl);
-                // blob转arrayBuffer
-                const reader2 = new FileReader();
-                reader2.readAsArrayBuffer(blob);
-                // 参数
-                let metadata = {
-                    "content-type": file.type || officeFileDefaultType,
-                    "content-length": fileSize
-                };
-                reader2.onload = ex => {
-                    // 定义流
-                    const bufferStream = new stream.PassThrough();
-                    // 将buffer写入
-                    bufferStream.end(Buffer.from(ex.target.result));
-                    // 上传
-                    minioClient.putObject(res.ossConfig.bucket, remoteName, bufferStream, fileSize, metadata, (err, etag) => {
-                        if (err == null) {
-                            // if (file.type.startsWith("image")) {
-                            //     let img = new Image();
-                            //     // 改变图片的src
-                            //     img.src = url;
-                            //     // 加载完成执行
-                            //     img.onload = function () {
-                            //         // 打印
-                            //         alert("width:" + img.width + ",height:" + img.height);
-                            //     };
-                            // }
-                            let callbackBody = {
-                                name: file.name,
-                                mimetype: file.type || officeFileDefaultType,
-                                size: fileSize,
-                                path: remoteName,
-                                bucket: res.ossConfig.bucket,
-                                filetoken: res.filetoken,
-                                groupKey: this.computedGroupKey,
-                                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-                            };
-                            axios.post(res.ossHost + res.confirmPath, { ...callbackBody })
-                                .then(response => {
-                                    this.successCb && this.successCb(null, response, null);
-                            });
-                        }
-                    });
-                };
-            };
-        },
-        // bri-upload-image 用的是这种方式
-        binaryMultipartUpload (file, res, callback) {
-            let type = "jpg";
-            let remoteName = `${this.randomTimeStampFn()}.${type}`;
-            // 上传成功的回调参数
-            let callbackBody = {
-                name: remoteName,
-                mimetype: "image/jpeg",
-                size: file.length,
-                path: remoteName,
-                bucket: res.ossConfig.bucket,
-                filetoken: res.filetoken,
-                groupKey: this.computedGroupKey,
-                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-            };
-
-            let ossCallback = {
-                callbackUrl: res.ossHost + res.confirmPath,
-                callbackBodyType: "application/json",
-                callbackBody: this.transferCallBody(callbackBody)
-            };
-
-            let newOss = {
-                ...res.ossConfig,
-                refreshSTSToken: async () => {
-                    // 向您搭建的STS服务获取临时访问凭证。
-                    return {
-                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
-                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
-                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
-                    };
-                },
-                // 刷新临时访问凭证的时间间隔，单位为毫秒。
-                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.percent = 100;
-                this.uploadSuccess = true;
-                setTimeout(() => {
-                    this.percent = 0;
-                    this.uploadSuccess = false;
-                }, 500);
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch((err, response) => {
-                this.percent = 0;
-                this.uploadSuccess = false;
-                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;
-            }
-            if (this.percent >= 100) {
-                this.percent = 100;
-                setTimeout(() => {
-                    this.percent = 0;
-                }, 500);
-            }
-        },
-        // 以下为数据转换方法
-        randomTimeStampFn () {
-            let randomTimeStamp = new Date().getTime() + "" + Math.floor(Math.random() * 10000);
-            return this.$md5(randomTimeStamp);
-        },
-        transferCallBody (obj) {
-            let newObj = {};
-            for (let attr in obj) {
-                newObj[attr] = obj[attr];
-            }
-            return JSON.stringify(newObj);
-        },
-        // base64转换
-        base64Encode (input) {
-            let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-
-            let output = "";
-            let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
-            let i = 0;
-            input = this.utf8Encode(input);
-            while (i < input.length) {
-                chr1 = input.charCodeAt(i++);
-                chr2 = input.charCodeAt(i++);
-                chr3 = input.charCodeAt(i++);
-                enc1 = chr1 >> 2;
-                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
-                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
-                enc4 = chr3 & 63;
-                if (isNaN(chr2)) {
-                    enc3 = enc4 = 64;
-                } else if (isNaN(chr3)) {
-                    enc4 = 64;
-                }
-                output = output +
-                    _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
-                    _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
-            }
-            return output;
-        },
-        utf8Encode (str) {
-            str = str.replace(/\r\n/g, "\n");
-            let utftext = "";
-            for (let n = 0; n < str.length; n++) {
-                let c = str.charCodeAt(n);
-                if (c < 128) {
-                    utftext += String.fromCharCode(c);
-                } else if ((c > 127) && (c < 2048)) {
-                    utftext += String.fromCharCode((c >> 6) | 192);
-                    utftext += String.fromCharCode((c & 63) | 128);
-                } else {
-                    utftext += String.fromCharCode((c >> 12) | 224);
-                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
-                    utftext += String.fromCharCode((c & 63) | 128);
-                }
-
-            }
-            return utftext;
-        },
-        // base64转blob
-        toBlob (base64Data) {
-            let byteString = base64Data;
-            if (base64Data.split(",")[0].indexOf("base64") >= 0) {
-                byteString = atob(base64Data.split(",")[1]); // base64 解码
-            } else {
-                byteString = unescape(base64Data.split(",")[1]);
-            }
-            // 获取文件类型
-            const mimeString = base64Data.split(";")[0].split(":")[1]; // mime类型
-
-            // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
-            // let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
-            // let uintArr = new Uint8Array(arrayBuffer) // 创建视图
-
-            const uintArr = new Uint8Array(byteString.length); // 创建视图
-
-            for (let i = 0; i < byteString.length; i += 1) {
-                uintArr[i] = byteString.charCodeAt(i);
-            }
-            // 生成blob
-            const blob = new Blob([uintArr], {
-                type: mimeString
-            });
-            // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
-            return blob;
-        }
-    }
-};
+import axios from "axios";
+import Oss from "ali-oss";
+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"
+        }
+    },
+    data () {
+        return {
+            percent: 0,
+            uploadSuccess: false
+        };
+    },
+    created () { },
+    computed: {
+        computedGroupKey () {
+            return this.propsObj.groupKey || this.groupKey;
+        },
+        computedUrlModule () {
+            return this.propsObj.urlModule || this.urlModule;
+        },
+        computedOssType () {
+            return this.propsObj.ossType || this.ossType;
+        },
+        archiveKey () {
+            return this.propsObj._archiveKey || [];
+        },
+        percentColor () {
+            return Number(this.percent) === 100 ? "#5cb85c" : "#6090ed";
+        }
+    },
+    methods: {
+        handlePost (file, callback) {
+            this.$https({
+                url: this.computedUrlModule,
+                params: {
+                    token: this.$route.query && this.$route.query.token
+                },
+                callback: res => {
+                    this.inputType = "file";
+                    if (res.ossType === "ali-oss") {
+                        // 上传到阿里云res
+                        if (this.computedOssType === "binaryMultipartUpload") {
+                            this.binaryMultipartUpload(file, res, callback);
+                        }
+                        else if (this.computedOssType === "multipartUpload") {
+                            this.multipartUpload(file, res, callback);
+                        }
+                    }
+                    else if (res.ossType === "local") {
+                        this.localUpload(file, res, callback);
+                    }
+                    else if (res.ossType === "minio") {
+                        this.minioUpload(file, res, callback);
+                    }
+                    else {
+                        console.log(`请开发这种类型‘${res.ossType}’的上传模式`);
+                    }
+
+                }
+            });
+        },
+
+        localUpload (file, res, callback) {
+            let fileBody = {
+                groupKey: this.computedGroupKey,
+                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+            };
+
+            const url = `${res.ossHost}${res.uploadPath}`;
+            let formData = new FormData();
+            formData.append("file_stream", file);
+
+            axios.post(url, formData, {
+                headers: {
+                    filetoken: res.filetoken,
+                    filebody: JSON.stringify(fileBody)
+                },
+                onUploadProgress: progressEvent => {
+                    this.inProgress(Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1)));
+                }
+            }).then(response => {
+                this.uploadSuccess = true;
+                this.percent = 100;
+                setTimeout(() => {
+                    this.percent = 0;
+                    this.uploadSuccess = false;
+                }, 500);
+                this.successCb && this.successCb(response, response.data, file);
+                callback && callback(response.data);
+            }).catch(error => {
+                this.percent = 0;
+                this.uploadSuccess = false;
+                this.handleError && this.handleError(error, {}, file);
+                callback && callback(error);
+            });
+        },
+        minioUpload (file, res, callback) {
+            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
+            let remoteName = `${this.randomTimeStampFn()}.${type}`;
+            let officeFileDefaultType = "";
+            if (!file.type) {
+                switch (type) {
+                case "xls":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "xlsx":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "doc":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "docx":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "ppt":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                case "pptx":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                default:
+                    officeFileDefaultType = "";
+                }
+            }
+            const minioClient = new minio.Client({
+                endPoint: res.ossConfig.endPoint,
+                port: res.ossConfig.port,
+                useSSL: res.ossConfig.useSSL,
+                accessKey: window.config.minioAccessKey,
+                secretKey: window.config.minioSecretKey
+            });
+            // 获取文件类型及大小
+            const fileSize = file.size;
+            // 将文件转换为minio可接收的格式
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onloadend = e => {
+                const dataurl = e.target.result;
+                // base64转blob
+                const blob = this.toBlob(dataurl);
+                // blob转arrayBuffer
+                const reader2 = new FileReader();
+                reader2.readAsArrayBuffer(blob);
+                // 参数
+                let metadata = {
+                    "content-type": file.type || officeFileDefaultType,
+                    "content-length": fileSize
+                };
+                reader2.onload = ex => {
+                    // 定义流
+                    const bufferStream = new stream.PassThrough();
+                    // 将buffer写入
+                    bufferStream.end(Buffer.from(ex.target.result));
+                    // 上传
+                    minioClient.putObject(res.ossConfig.bucket, remoteName, bufferStream, fileSize, metadata, (err, etag) => {
+                        if (err == null) {
+                            // if (file.type.startsWith("image")) {
+                            //     let img = new Image();
+                            //     // 改变图片的src
+                            //     img.src = url;
+                            //     // 加载完成执行
+                            //     img.onload = function () {
+                            //         // 打印
+                            //         alert("width:" + img.width + ",height:" + img.height);
+                            //     };
+                            // }
+                            let callbackBody = {
+                                name: file.name,
+                                mimetype: file.type || officeFileDefaultType,
+                                size: fileSize,
+                                path: remoteName,
+                                bucket: res.ossConfig.bucket,
+                                filetoken: res.filetoken,
+                                groupKey: this.computedGroupKey,
+                                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+                            };
+                            axios.post(res.ossHost + res.confirmPath, { ...callbackBody })
+                                .then(response => {
+                                    this.successCb && this.successCb(null, response, null);
+                            });
+                        }
+                    });
+                };
+            };
+        },
+        multipartUpload (file, res, callback) {
+            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
+            let remoteName = `${this.randomTimeStampFn()}.${type}`;
+            let officeFileDefaultType = "";
+            if (!file.type) {
+                switch (type) {
+                case "xls":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "xlsx":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "doc":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "docx":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "ppt":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                case "pptx":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                default:
+                    officeFileDefaultType = "";
+                }
+            }
+
+            // 上传成功的回调参数
+            let callbackBody = {
+                name: file.name,
+                mimetype: file.type || officeFileDefaultType,
+                size: file.size,
+                path: remoteName,
+                bucket: res.ossConfig.bucket,
+                filetoken: res.filetoken,
+                groupKey: this.computedGroupKey,
+                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+            };
+
+            let ossCallback = {
+                callbackUrl: res.ossHost + res.confirmPath,
+                callbackBodyType: "application/json",
+                callbackBody: this.transferCallBody(callbackBody)
+            };
+
+            let newOss = {
+                ...res.ossConfig,
+                refreshSTSToken: async () => {
+                    // 向您搭建的STS服务获取临时访问凭证。
+                    return {
+                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
+                    };
+                },
+                // 刷新临时访问凭证的时间间隔，单位为毫秒。
+                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(() => {
+                    this.percent = 0;
+                    this.uploadSuccess = false;
+                }, 500);
+                this.successCb && this.successCb(response, response.data, file);
+                callback && callback(response.data);
+            }).catch((err, response) => {
+                this.percent = 0;
+                this.uploadSuccess = false;
+                this.handleError && this.handleError(err, response, file);
+                callback && callback(err);
+            });
+        },
+        // bri-upload-image 用的是这种方式
+        binaryMultipartUpload (file, res, callback) {
+            let type = "jpg";
+            let remoteName = `${this.randomTimeStampFn()}.${type}`;
+            // 上传成功的回调参数
+            let callbackBody = {
+                name: remoteName,
+                mimetype: "image/jpeg",
+                size: file.length,
+                path: remoteName,
+                bucket: res.ossConfig.bucket,
+                filetoken: res.filetoken,
+                groupKey: this.computedGroupKey,
+                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+            };
+
+            let ossCallback = {
+                callbackUrl: res.ossHost + res.confirmPath,
+                callbackBodyType: "application/json",
+                callbackBody: this.transferCallBody(callbackBody)
+            };
+
+            let newOss = {
+                ...res.ossConfig,
+                refreshSTSToken: async () => {
+                    // 向您搭建的STS服务获取临时访问凭证。
+                    return {
+                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
+                    };
+                },
+                // 刷新临时访问凭证的时间间隔，单位为毫秒。
+                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.percent = 100;
+                this.uploadSuccess = true;
+                setTimeout(() => {
+                    this.percent = 0;
+                    this.uploadSuccess = false;
+                }, 500);
+                this.successCb && this.successCb(response, response.data, file);
+                callback && callback(response.data);
+            }).catch((err, response) => {
+                this.percent = 0;
+                this.uploadSuccess = false;
+                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;
+            }
+
+            if (this.percent >= 100) {
+                this.percent = 100;
+                setTimeout(() => {
+                    this.percent = 0;
+                }, 500);
+            }
+        },
+        // 以下为数据转换方法
+        randomTimeStampFn () {
+            let randomTimeStamp = new Date().getTime() + "" + Math.floor(Math.random() * 10000);
+            return this.$md5(randomTimeStamp);
+        },
+        transferCallBody (obj) {
+            let newObj = {};
+            for (let attr in obj) {
+                newObj[attr] = obj[attr];
+            }
+            return JSON.stringify(newObj);
+        },
+        // base64转换
+        base64Encode (input) {
+            let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+
+            let output = "";
+            let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+            let i = 0;
+            input = this.utf8Encode(input);
+            while (i < input.length) {
+                chr1 = input.charCodeAt(i++);
+                chr2 = input.charCodeAt(i++);
+                chr3 = input.charCodeAt(i++);
+                enc1 = chr1 >> 2;
+                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+                enc4 = chr3 & 63;
+                if (isNaN(chr2)) {
+                    enc3 = enc4 = 64;
+                } else if (isNaN(chr3)) {
+                    enc4 = 64;
+                }
+                output = output +
+                    _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+                    _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+            }
+            return output;
+        },
+        utf8Encode (str) {
+            str = str.replace(/\r\n/g, "\n");
+            let utftext = "";
+            for (let n = 0; n < str.length; n++) {
+                let c = str.charCodeAt(n);
+                if (c < 128) {
+                    utftext += String.fromCharCode(c);
+                } else if ((c > 127) && (c < 2048)) {
+                    utftext += String.fromCharCode((c >> 6) | 192);
+                    utftext += String.fromCharCode((c & 63) | 128);
+                } else {
+                    utftext += String.fromCharCode((c >> 12) | 224);
+                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                    utftext += String.fromCharCode((c & 63) | 128);
+                }
+
+            }
+            return utftext;
+        },
+        // base64转blob
+        toBlob (base64Data) {
+            let byteString = base64Data;
+            if (base64Data.split(",")[0].indexOf("base64") >= 0) {
+                byteString = atob(base64Data.split(",")[1]); // base64 解码
+            } else {
+                byteString = unescape(base64Data.split(",")[1]);
+            }
+            // 获取文件类型
+            const mimeString = base64Data.split(";")[0].split(":")[1]; // mime类型
+
+            // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
+            // let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
+            // let uintArr = new Uint8Array(arrayBuffer) // 创建视图
+
+            const uintArr = new Uint8Array(byteString.length); // 创建视图
+
+            for (let i = 0; i < byteString.length; i += 1) {
+                uintArr[i] = byteString.charCodeAt(i);
+            }
+            // 生成blob
+            const blob = new Blob([uintArr], {
+                type: mimeString
+            });
+            // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
+            return blob;
+        }
+    }
+};