qimall/backend/views/components/common/com-upload-oss.php

<template id="com-upload-oss">
    <div class="com-upload-oss" @click="handleClick">
        <slot></slot>
										<!-- 文件格式&是否支持多文件上传 -->
        <input ref="input" type="file" :accept="accept" :multiple="multiple" style="display: none"
               @change="handleChange">
    </div>
</template>
<script type="text/javascript" src="/resources/js/cos-js-sdk-v5.min.js"></script>
<script type="text/javascript" src="/resources/js/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="/resources/js/qiniu.min.js"></script>
<script>
    Vue.component('com-upload-oss', {
        template: '#com-upload-oss',
        props: {
            disabled: Boolean,
            multiple: Boolean,
            max: Number,
            accept: String,
            params: Object,
            fields: Object,
            config: Object,
        },
        data() {
            return {
                dialogVisible: false,
                loading: true,
                attachments: [],
                checkedAttachments: [],
                files: [],
            };
        },
        computed: {
            videoConfigInfo() {
                return this.config
            },
            uploadParams() {
                return this.params
            }
        },
        created() {},
        methods: {
            handleClick() {
                if (this.disabled) {
                    return;
                }
                this.$refs.input.value = null;
                this.$refs.input.click();
            },
            handleChange(e) {
                if (!e.target.files) return;
                this.uploadFiles(e.target.files);
            },
            uploadFiles(rawFiles) {
                if (this.max && rawFiles.length > this.max) {
                    this.$message.error('最多一次只能上传' + this.max + '个文件。')
                    return;
                }
                this.files = [];
                for (let i = 0; i < rawFiles.length; i++) {
                    const file = {
                        _complete: false,
                        response: null,
                        rawFile: rawFiles[i],
                    };
                    this.files.push(file);
                }
                this.$emit('start', this.files);
				// 循环上传文件
                for (let i in this.files) {
                    // this.upload(this.files[i]);
                    if(this.videoConfigInfo.drive == 'oss') {
                        this.handleAlyInUploading(this.files[i])
                    }else if(this.videoConfigInfo.drive == 'qiniu'){
                        this.handleQnyInUploading(this.files[i])
                    }else {
                        this.handleFileInUploading(this.files[i])
                    }

                }
            },
            /* 保存上传视频 */
            saveVideoUrl(info, file) {
                const params = {};
                let formData = new FormData();
                params['r'] = 'mall/attachment/set-long-video-data';
                this.$request({
                    params: params,
                    method: 'post',
                    data: {
                        url: info.url,
                        upload_type: 'bigVideos',
                        old_name: info.name,
                        attachment_group_id: this.uploadParams.attachment_group_id || 0,
                    },
                }).then(e => {
                    if (e.data.code === 1) {
                        this.$message.error(e.data.msg);
                    }
                    file.response = e;
                    file._complete = true;
                    this.onSuccess(file);
                }).catch(e => {
                    file._complete = true;
                });
            },
            /* 腾讯云上传 */
            handleFileInUploading(file) {
                const timestamp = new Date().getTime();
                const fileName = `${timestamp}_${file.rawFile.name}`
                const cos = new COS({
                    SecretId: this.videoConfigInfo.secret_id,
                    SecretKey: this.videoConfigInfo.secret_key,
                });
                cos.uploadFile({
                    Bucket: this.videoConfigInfo.bucket, /* 填写自己的 bucket，必须字段 */
                    Region: this.videoConfigInfo.area,     /* 存储桶所在地域，必须字段 */
                    Key: `videos/${fileName}`,              /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
                    Body: file.rawFile, // 上传文件对象
                    SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
                    onProgress: function(progressData) {
                        console.log(JSON.stringify(progressData));
                    }
                }, (err, data)=> {
                    if (err) {
                        console.log('上传失败', err);
                        file._complete = true;
                        this.onSuccess(file);
                    } else {
                        console.log('上传成功', data);
                        let info = {
                            url: `https://${data.Location}`,
                            name: file.rawFile.name,
                        }
                        this.saveVideoUrl(info, file)
                    }
                });
            },
            /* 七牛云上传 */
            async handleQnyInUploading(file) {
                const timestamp = new Date().getTime();
                const fileName = `${timestamp}_${file.rawFile.name}`
                let that = this
                let token = this.videoConfigInfo.token
                let config = {
                    useCdnDomain: true,
                    region: qiniu.region.z2
                };
                let putExtra = {
                    fname: fileName,
                    params: {},
                    mimeType: null
                };
                let observable = qiniu.upload(file.rawFile, `videos/${fileName}`, token, putExtra, config);
                observable.subscribe({
                    next(res) {
                        console.log(res)
                    },
                    error(err) {
                        console.log('上传失败', err)
                        that.$message.error('上传失败');
                        file._complete = true;
                        that.onSuccess(file);
                    },
                    complete(res) {
                        console.log('上传成功', res)
                        let info = {
                            url: `${that.videoConfigInfo.domain}/${res.key}`,
                            name: file.rawFile.name,
                        }
                        that.saveVideoUrl(info, file)
                         //上传成功之后把路径返回给后端
                     },
                })
            },
            /* 阿里云上传 */
            async handleAlyInUploading(file) {
                const timestamp = new Date().getTime();
                const fileName = `${timestamp}_${file.rawFile.name}`
                const client = new OSS({
                    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                    region: this.videoConfigInfo.region,
                    endpoint: this.videoConfigInfo.endpoint,
                    authorizationV4: true,
                    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
                    accessKeyId: this.videoConfigInfo.secret_id,
                    accessKeySecret: this.videoConfigInfo.secret_key,
                    // 从STS服务获取的安全令牌（SecurityToken）。
                    stsToken: this.videoConfigInfo.security_token,
                    // 填写Bucket名称，例如examplebucket。
                    bucket: this.videoConfigInfo.bucket,
                });
                const headers = {
                    // 指定该Object被下载时的网页缓存行为。
                    "Cache-Control": "no-cache",
                    // 指定该Object被下载时的名称。
                    "Content-Disposition": "example.txt",
                    // 指定该Object被下载时的内容编码格式。
                    "Content-Encoding": "utf-8",
                    // 指定过期时间，单位为毫秒。
                    Expires: "1000",
                    // 指定Object的存储类型。
                    "x-oss-storage-class": "Standard",
                    // 指定Object标签，可同时设置多个标签。
                    "x-oss-tagging": "Tag1=1&Tag2=2",
                    // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
                    "x-oss-forbid-overwrite": "true",
                };
                // 指定上传到examplebucket的Object名称，例如exampleobject.txt。
                const options = {
                    // 获取分片上传进度、断点和返回值。
                    progress: (p, cpt, res) => {
                      console.log(p);
                    },
                    // 设置并发上传的分片数量。
                    parallel: 4,
                    // 设置分片大小。默认值为1 MB，最小值为100 KB。
                    partSize: 1024 * 1024,
                    // headers,
                    // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
                    meta: { year: 2020, people: "test" },
                    mime: "text/plain",
                };
                //简单上传
                //const result = await client.put(name, file.rawFile, options);
                //console.log(result);
                // 分片上传。
                try {
                    const res = await client.multipartUpload(`videos/${fileName}`, file.rawFile, {
                        ...options,
                    });
                    console.log(res)
                    let info = {
                        url: `https://${this.videoConfigInfo.domain}/videos/${fileName}`,
                        name: file.rawFile.name,
                    }
                    this.saveVideoUrl(info, file)
                } catch (err) {
                  console.log(err);
                  file._complete = true;
                  that.onSuccess(file);
                }
            },
            onSuccess(file) {
				// 向父组件传递方法
                this.$emit('success', file);
            },
        },
    });
</script>