事件上报视频上传

guoshilong

2022-09-30 3ba473d1c7d430a54a1a67b079138aecc7fb388b

事件上报视频上传

 FETCH_HEAD

File was deleted

 HEAD

File was deleted

 components/evan-upload/evan-iconfont.css

New file
@@ -0,0 +1,35 @@
@font-face {
  font-family: "e-icon"; /* Project id 2811366 */
  /* Color fonts */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

.e-icon {
  font-family: "e-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.e-icon-shipin6:before {
  content: "\e600";
}

.e-icon-shipin5:before {
  content: "\e621";
}

.e-icon-shipin:before {
  content: "\e618";
}

.e-icon-shipin2:before {
  content: "\ebe0";
}

.e-icon-MP4:before {
  content: "\e679";
}


 components/evan-upload/evan-upload.vue

New file
@@ -0,0 +1,1051 @@
<template>
    <view class="upload-wrap">
        <view class="preview-wrap">
            <!-- 预览 -->
            <block v-if="usePreview">
                <view class="image" v-for="(item, index) in tempImgArr" :key="item[imgCoverKey]" :style="{ borderRadius: radius + 'rpx' }">
                    <u-image
                        width="100%"
                        height="152rpx"
                        :border-radius="radius"
                        @click="fnPreviewImage(index, tempImgArr)"
                        :lazy-load="true"
                        :src="item[imgCoverKey]"
                        mode="aspectFill"
                    ></u-image>
                    <u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, true)"></u-icon>
                </view>
                <view
                    class="video"
                    :class="{ 'no-mask': !item[videoCoverKey] }"
                    :style="{ borderRadius: radius + 'rpx', '--radius': radius + 'px' }"
                    v-for="(item, index) in tempVideoArr"
                    :key="item[videoCoverKey]"
                >
                    <block v-if="item[videoCoverKey]">
                        <u-image
                            width="152rpx"
                            height="152rpx"
                            :border-radius="radius"
                            :lazy-load="false"
                            :src="item[videoCoverKey]"
                            mode="aspectFill"
                            @click="fnPreviewVideo(item)"
                        ></u-image>
                        <view class="video-play"><u-icon class="video-play-icon" name="play-right-fill" color="#fff" size="30" @click="fnPreviewVideo(item)"></u-icon></view>
                        <u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, false)"></u-icon>
                    </block>
                    <block v-else>
                        <view class="video-play-cover" :style="{ borderRadius: radius + 'rpx' }" >
                            <u-image
                                class="video-play-cover-image"
                                width="100%"
                                height="100%"
                                :border-radius="radius"
                                :lazy-load="false"
                                :src="videoDefaultCover"
                                mode="scaleToFill"
                                @click="fnPreviewVideo(item)"
                            ></u-image>
                        </view>
                        <!-- <text class="video-play"><u-icon class="video-play-icon" name="play-right-fill" color="#fff" size="30" @click="fnPreviewVideo(item)"></u-icon></text> -->
                        <u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, false)"></u-icon>
                    </block>
                </view>
            </block>
            <!-- 选择 -->
            <block>
                <view class="select-item" :style="{ borderRadius: radius + 'rpx' }" v-if="useImage && imgArr.length < imgLimit" @click="chooseImage">
                    <u-icon class="icon" name="camera" color="#999" size="40"></u-icon>
                    <view class="text">{{ selectImageText }}</view>
                </view>
                <view class="select-item" :style="{ borderRadius: radius + 'rpx' }" v-if="useVideo && videoArr.length < videoLimit" @click="chooseVideo">
                    <text class="icon e-icon-video e-icon e-icon-shipin"></text>
                    <view class="text">{{ selectVideoText }}</view>
                </view>
            </block>
        </view>
        <!-- 超出的图片大小展示 -->
        <view class="over-size-wrapper" v-if="showOverLimitTip && !useOverLimitTipModal && overSizeImgArr.length != 0">
            <view class="over-size-wrapper-title">
                <text class="over-size-wrapper-title-tip">以下图片超出限制上传失败，限制为{{ fileUnitConversion(imgSizeLimit, 'KB', 'M') }}M</text>
                <text class="over-size-wrapper-title-clear" @click="fnClearOverSizeArr('image')" :style="{ color: color }">
                    <u-icon class="over-size-wrapper-title-clear-icon" name="close" size="20" :color="color"></u-icon>
                    关闭提示
                </text>
            </view>
            <view class="over-size-wrapper-list">
                <block v-for="(img, index) in overSizeImgArr" :key="index">
                    <view class="over-size-wrapper-list-item">
                        <image class="over-size-wrapper-list-item-image" :src="img.url" mode="aspectFill"></image>
                        <view class="over-size-wrapper-list-item-name">{{ img.fileName }}</view>
                        <view class="over-size-wrapper-list-item-size">{{ img.size }}</view>
                    </view>
                </block>
            </view>
        </view>
        <u-popup v-model="isShowOverLimitModal" mode="center" :z-index="9999" border-radius="20">
            <view class="modal-content padding-15">
                <view class="over-size-wrapper in-modal" v-if="showOverLimitTip && overSizeImgArr.length != 0">
                    <view class="over-size-wrapper-title">
                        <text class="over-size-wrapper-title-tip">以下图片超出限制上传失败，限制为{{ fileUnitConversion(imgSizeLimit, 'KB', 'M') }}M</text>
                        <text class="over-size-wrapper-title-clear" @click="fnClearOverSizeArr('image')" :style="{ color: color }">
                            <u-icon class="over-size-wrapper-title-clear-icon" name="close" size="20" :color="color"></u-icon>
                            关闭提示
                        </text>
                    </view>
                    <view class="over-size-wrapper-list">
                        <block v-for="(img, index) in overSizeImgArr" :key="index">
                            <view class="over-size-wrapper-list-item">
                                <image class="over-size-wrapper-list-item-image" :src="img.url" mode="aspectFill"></image>
                                <view class="over-size-wrapper-list-item-name">{{ img.fileName }}</view>
                                <view class="over-size-wrapper-list-item-size">{{ img.size }}</view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-modal
            :show-cancel-button="true"
            :confirm-color="color"
            v-model="uploadFileDeleteModal.show"
            @confirm="uploadFileDeleteConfirm"
            @cancel="uploadFileDeleteModal.show = false"
            :content="uploadFileDeleteModal.tip"
        ></u-modal>
        <u-modal z-index="10076" v-model="uploadFileTip.show" title="提示" :confirm-text="cancelText" :confirm-color="cancelColor" @confirm="uploadFileTipDestroy()">
            <view class="slot-content">
                <view class="progress-wrapper">
                    <u-line-progress :active-color="color" :striped="true" :striped-active="true" :percent="uploadFileTip.progress"></u-line-progress>
                    <view class="progress-tip">文件上传中，请稍等（{{ uploadFileTip.totalBytesSent }}/{{ uploadFileTip.totalBytesExpectedToSend }}M）</view>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script>
import { getFileSuffix, getFileUnitConversion, previewImages } from './evan-utils.js';
export default {
    name: 'evan-upload',
    props: {
        debug: {
            type: Boolean,
            default: false
        },
        // 主色调
        color: {
            type: String,
            default: '#ddb880'
        },
        radius: {
            type: Number,
            default: 6
        },
        cancelColor: {
            type: String,
            default: '#ddb880'
        },
        cancelText: {
            type: String,
            default: '取消上传'
        },
        selectImageText: {
            type: String,
            default: '选择图片'
        },
        selectVideoText: {
            type: String,
            default: '选择视频'
        },
        /**
         * 是否自动切换数据配置，用于独立配置的情况
         * 注意：如果独立使用组件，且单独配置上传地址的情况下，
         *         如 v-if 显示图片选择 或者 视频选择的情况下 需要手动调用 fnChangeOptions()
         * */
        autoChangeOptions: {
            type: Boolean,
            default: true
        },
        // 文件的扩展名字段，用于（ loadAllPreview）手动初始化默认的数据时候的判断
        fileSuffix: {
            type: String,
            default: 'fileType'
        },
        // 通用上传配置
        options: {
            type: Object,
            default: null
        },
        // 图片上传配置
        imageOptions: {
            type: Object,
            default: null
        },
        // 视频上传配置
        videoOptions: {
            type: Object,
            default: null
        },
        // 数据通用的格式化（默认是响应的格式）
        format: {
            type: Function,
            default: null
        },
        // 图片格式化(默认是响应的格式)
        imgFormat: {
            type: Function,
            default: null
        },
        // 视频格式化(默认是响应的格式)
        videoFormat: {
            type: Function,
            default: null
        },
        // 是否禁用上传
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否显示超出上传大小限制的图片
        showOverLimitTip: {
            type: Boolean,
            default: true
        },
        // 超出限制的使用是否启用弹窗效果
        useOverLimitTipModal: {
            type: Boolean,
            default: false
        },
        // 是否启用预览功能
        usePreview: {
            type: Boolean,
            default: true
        },
        // 是否使用图片上传
        useImage: {
            type: Boolean,
            default: true
        },
        // 是否使用视频上传
        useVideo: {
            type: Boolean,
            default: true
        },
        // 图片过滤
        imgExtension: {
            type: Array,
            default() {
                return ['jpg', 'jpeg', 'png'];
            }
        },
        // 图片的预览的键（默认 thumbnail）
        imgCoverKey: {
            type: String,
            default: 'thumbnail'
        },
        // 图片限制
        imgLimit: {
            type: Number,
            default: 9
        },
        // 图片单张大小限制（默认2048k = 2M）
        imgSizeLimit: {
            type: Number,
            default: 2048
        },
        // 图片压缩配置，默认原图和压缩
        imgSizeType: {
            type: Array,
            default() {
                return ['original', 'compressed'];
            }
        },
        // 图片来源，默认相册和相机
        imgSourceType: {
            type: Array,
            default() {
                return ['album', 'camera'];
            }
        },

        // 视频封面图的key （默认是 thumbnail ）
        videoCoverKey: {
            type: String,
            default: 'thumbnail'
        },
        // 视频限制
        videoLimit: {
            type: Number,
            default: 1
        },
        // 视频大小限制（默认102400kb = 100M）
        videoSizeLimit: {
            type: Number,
            default: 102400
        },
        // 是否启用视频压缩
        useVideoCompressed: {
            type: Boolean,
            default: true
        },
        // 视频来源，默认相册和相机
        videoSourceType: {
            type: Array,
            default() {
                return ['album', 'camera'];
            }
        },

        // 表单模块名称
        moduleName: {
            type: String,
            default: ''
        },
        // 默认预览的图片或者视频
        defaultImageOrVideoList: {
            type: Array,
            default() {
                return [];
            }
        },
        // 默认预览的图片
        defaultImageList: {
            type: Array,
            default() {
                return [];
            }
        },
        // 默认预览的视频
        defaultVideoList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            // 文件上传提示
            uploadFileTip: {
                task: null, // 文件上传Task
                show: false, // 是否显示
                totalBytesExpectedToSend: 0,
                totalBytesSent: 0, // 已经上传的数据长度，单位 Bytes
                progress: 0 // 上传进度百分比
            },
            uploadFileDeleteModal: {
                show: false,
                isImage: true,
                tip: ''
            },
            videoDefaultCover:'data:image/png;base64,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',
            Options: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
            ImageOptions: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
            VideoOptions: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
            isShowOverLimitModal: false,
            tempImgArr: [], // 用于展示的图片
            tempVideoArr: [], // 用于展示的视频
            imgArr: [], //图片数组
            videoArr: [], //视频数组
            overSizeImgArr: [], // 超出大小的图片
            overSizeVideoArr: [] // 超出大小的视频
        };
    },
    beforeUpdate() {
        if (this.autoChangeOptions) {
            if (this.useImage && this.useVideo) return;
            // 组件更新之前切换配置
            this.fnChangeOptions();
        }
    },
    mounted() {
        // 在小程序中存在数据无法回显的问题，改为手动触发
        // #ifndef MP-WEIXIN
        this.handleDefaultPrivew();
        // #endif
        // 初始化配置
        this.fnChangeOptions();
    },
    methods: {
        // 配置
        fnChangeOptions() {
            if (this.options) {
                this.ImageOptions = Object.assign({}, this.ImageOptions, this.options);
                this.VideoOptions = Object.assign({}, this.VideoOptions, this.options);
            }
            if (this.imageOptions) {
                this.ImageOptions = Object.assign({}, this.ImageOptions, this.imageOptions);
            }
            if (this.videoOptions) {
                this.VideoOptions = Object.assign({}, this.VideoOptions, this.videoOptions);
            }
        },
        loadAllPreview(list) {
            this.clear();
            if (!list) return;
            list.forEach((item, index) => {
                this.handlePreviewData(item, item[this.fileSuffix] !== 'mp4', true);
            });
        },
        loadImagePreview(list) {
            this.clear();
            if (!list) return;
            list.forEach((item, index) => {
                this.handlePreviewData(item, true);
            });
        },
        loadVideoPreview(list) {
            this.clear();
            if (!list) return;
            list.forEach((item, index) => {
                this.handlePreviewData(item, false);
            });
        },
        chooseImage() {
            if (this.disabled) return;
            if (!this.ImageOptions.url) {
                return uni.showToast({
                    icon: 'none',
                    title: '未配置上传地址'
                });
            }
            const _this = this;
            this.overSizeImgArr = [];
            uni.chooseImage({
                count: this.imgLimit,
                extension: this.imgExtension,
                crop: this.crop,
                sourceType: this.imgSourceType,
                sizeType: this.imgSizeType, //可以指定是原图还是压缩图，默认二者都有
                success: function(res) {
                    uni.showLoading({
                        title: '上传中...',
                        mask: true
                    });
                    _this.$emit('on-loading', true);
                    for (var i = 0; i < res.tempFilePaths.length; i++) {
                        if (_this.fileUnitConversion(res.tempFiles[i].size, 'B', 'KB') > _this.imgSizeLimit) {
                            _this.overSizeImgArr.push({
                                url: res.tempFilePaths[i],
                                fileName: res.tempFiles[i].name,
                                size: _this.fileUnitConversion(res.tempFiles[i].size) + 'M'
                            });
                        } else {
                            uni.uploadFile({
                                url: _this.ImageOptions.url,
                                filePath: res.tempFilePaths[i],
                                name: _this.ImageOptions.name,
                                header: _this.ImageOptions.header,
                                formData: {
                                    ..._this.ImageOptions.formData,
                                    moduleName: _this.moduleName
                                },
                                success: uploadFileRes => {
                                    if (uploadFileRes.statusCode != 200) {
                                        uni.showToast({
                                            icon: 'none',
                                            title: '上传失败，服务器异常！'
                                        });
                                        _this.$emit('on-error', uploadFileRes);
                                    } else {
                                        _this.handleUploadRes(uploadFileRes, true);
                                    }
                                },
                                fail(err) {
                                    uni.showToast({
                                        icon: 'none',
                                        title: '上传出错了'
                                    });
                                    _this.debug && console.error(err);
                                    // uni.hideLoading();
                                    _this.$emit('on-error', err);
                                }
                            });
                        }
                        // 执行回调显示超出限制的图片
                        if (i + 1 == res.tempFilePaths.length) {
                            if (_this.overSizeImgArr.length == res.tempFilePaths.length) {
                                uni.hideLoading();
                            }
                            _this.fnEmitOverSize();
                            _this.$emit('on-success', true);
                        }
                    }
                }
            });
        },
        chooseVideo() {
            if (this.disabled) return;
            if (!this.VideoOptions.url) {
                return uni.showToast({
                    icon: 'none',
                    title: '未配置上传地址'
                });
            }
            const _this = this;
            uni.chooseVideo({
                sourceType: this.videoSourceType,
                compressed: this.useVideoCompressed,
                success: function(res) {
                    _this.uploadFileTip.show = true;
                    // 上传视频
                    _this.uploadFileTip.task = uni.uploadFile({
                        url: _this.VideoOptions.url,
                        filePath: res.tempFilePath,
                        name: _this.VideoOptions.name,
                        header: _this.VideoOptions.header,
                        formData: {
                            ..._this.VideoOptions.formData,
                            moduleName: _this.moduleName
                        },
                        success: uploadFileRes => {
                            if (uploadFileRes.statusCode != 200) {
                                uni.showToast({
                                    icon: 'none',
                                    title: '上传失败，服务器异常！'
                                });
                                _this.$emit('on-error', uploadFileRes);
                            } else {
                                _this.handleUploadRes(uploadFileRes, false);
                            }
                        },
                        fail(err) {
                            uni.showToast({
                                icon: 'none',
                                title: '上传出错了'
                            });
                            _this.debug && console.error(err);
                            _this.uploadFileTipDestroy();
                            _this.$emit('on-error', err);
                        }
                    });
                    _this.uploadFileTask();
                }
            });
        },
        // 处理回调的数据
        handleUploadRes(res, isImage = true) {
            uni.hideLoading();
            const _this = this;
            if (res.statusCode != 200) {
                _this.$emit('on-error', res);
                _this.$u.toast(res.msg || '上传失败，请重试！');
                _this.uploadFileTipDestroy();
                return;
            }
            // 后台返回数组的形式
            if (res['code'] != undefined && res.code === 200) {
                if (Object.prototype.toString.call(res.data) === '[object Array]') {
                    res.data.forEach(item => {
                        _this.handlePreviewData(item, isImage);
                    });
                    // 后台返回对象形式
                } else if (Object.prototype.toString.call(res.data) === '[object Object]') {
                    // 返回对象的形式
                    _this.handlePreviewData(res.data, isImage);
                } else {
                    // 后台返回直接返回图片
                    _this.handleRes(res.data, isImage);
                }
                _this.handleCallback(res);
                // 校验是否有状态码的情况(直接返回图片地址)
            } else if (Object.prototype.toString.call(res.data) == '[object String]') {
                _this.handleRes(res.data, isImage, true);
                _this.handleCallback(res);
            } else {
                _this.$emit('on-error', res);
                _this.$u.toast(res.msg || '上传失败，请重试！');
                _this.uploadFileTipDestroy();
            }
        },
        handleRes(res, isImage, isString = false) {
            const _this = this;
            let _fileNameOrUrl = isString ? res : res.data;
            let _fileSuffix = getFileSuffix(_fileNameOrUrl);
            if (isImage) {
                if (this.imgCoverKey == 'url') {
                    _this.handlePreviewData(
                        {
                            url: _fileNameOrUrl,
                            [this.fileSuffix]: _fileSuffix
                        },
                        true
                    );
                } else {
                    _this.handlePreviewData(
                        {
                            [this.imgCoverKey]: _fileNameOrUrl,
                            url: _fileNameOrUrl,
                            [this.fileSuffix]: _fileSuffix
                        },
                        true
                    );
                }
            } else {
                _this.handlePreviewData(
                    {
                        url: _fileNameOrUrl,
                        [this.fileSuffix]: _fileSuffix
                    },
                    false
                );
            }
        },
        handleCallback(res) {
            this.sendData();
            this.uploadFileTipDestroy();
            this.$emit('on-success', res);
        },
        uploadFileTask() {
            this.uploadFileTip.task.onProgressUpdate(res => {
                this.uploadFileTip.progress = res.progress;
                this.uploadFileTip.totalBytesSent = this.fileUnitConversion(res.totalBytesSent);
                this.uploadFileTip.totalBytesExpectedToSend = this.fileUnitConversion(res.totalBytesExpectedToSend);
            });
        },
        // 销毁上传任务
        uploadFileTipDestroy() {
            this.uploadFileTip.show = false;
            if (this.uploadFileTip.task) {
                this.uploadFileTip.task.abort(); // 终止上传
            }
            const _setTimeout = setTimeout(() => {
                this.uploadFileTip.task = null;
                this.uploadFileTip.progress = 0;
                this.uploadFileTip.totalBytesSent = 0;
                this.uploadFileTip.totalBytesExpectedToSend = 0;
                clearTimeout(_setTimeout);
            }, 200);
        },
        fileUnitConversion(byte, from = 'B', to = 'M') {
            return getFileUnitConversion(byte, from, to);
        },
        /**
         * 超出大小限制的图片或者视频
         * */
        fnEmitOverSize() {
            if (this.showOverLimitTip && this.useOverLimitTipModal && this.overSizeImgArr.length != 0) {
                this.isShowOverLimitModal = true;
            }
            this.$emit('on-over-list', {
                images: this.overSizeImgArr,
                videos: this.overSizeVideoArr
            });
        },
        fnClearOverSizeArr(type) {
            this.isShowOverLimitModal = false;
            if (type == 'image') {
                this.overSizeImgArr = [];
            } else {
                this.overSizeVideoArr = [];
            }
        },
        // 更新文件上传对象字段
        updateFileDataObject(key, val) {
            this.$set(this.uploadFileTip, key, val);
        },
        // 回调发送数据
        sendData() {
            let _data = [],
                _type = 'all';
            if (this.useImage && this.useVideo) {
                // 都使用
                if (this.imgArr.length !== 0) {
                    _data.push(...this.imgArr);
                }
                if (this.videoArr.length !== 0) {
                    _data.push(...this.videoArr);
                }
                _type = 'all';
            } else if (this.useImage) {
                // 使用图片
                if (this.imgArr.length !== 0) {
                    _data.push(...this.imgArr);
                }
                _type = 'image';
            } else if (this.useVideo) {
                if (this.videoArr.length !== 0) {
                    _data.push(...this.videoArr);
                }
                _type = 'video';
            }
            this.$emit('on-upload', {
                type: _type,
                data: _data
            });
        },
        // 图片预览
        fnPreviewImage(current, images) {
            previewImages(current, images);
        },
        // 删除图片或视频
        deleteImageOrVideo(index, isImage = true) {
            this.uploadFileDeleteModal.tip = `您确定要删除该${isImage ? '图片' : '视频'}吗？`;
            this.uploadFileDeleteModal.show = true;
            this.uploadFileDeleteModal.isImage = isImage;
            this.uploadFileDeleteModal.index = index;
        },
        // 确认删除
        uploadFileDeleteConfirm() {
            let index = this.uploadFileDeleteModal.index;
            if (this.uploadFileDeleteModal.isImage) {
                this.tempImgArr.splice(index, 1);
                this.imgArr.splice(index, 1);
            } else {
                this.tempVideoArr.splice(index, 1);
                this.videoArr.splice(index, 1);
            }
            this.sendData();
        },
        // 处理图片数据
        handlePushImage(dataItem) {
            // 支持自定义格式化
            if (this.imgFormat && typeof this.imgFormat === 'function') {
                this.imgArr.push(this.imgFormat(dataItem));
                this.tempImgArr.push(this.imgFormat(dataItem));
            } else if (this.format && typeof this.format === 'function') {
                this.imgArr.push(this.format(dataItem));
                this.tempImgArr.push(this.format(dataItem));
            } else {
                this.imgArr.push(dataItem);
                this.tempImgArr.push(dataItem);
            }
        },
        // 处理视频数据
        handlePushVideo(dataItem) {
            if (this.videoFormat && typeof this.videoFormat === 'function') {
                this.videoArr.push(this.videoFormat(dataItem));
                this.tempVideoArr.push(this.videoFormat(dataItem));
            } else if (this.format && typeof this.format === 'function') {
                this.videoArr.push(this.format(dataItem));
                this.tempVideoArr.push(this.format(dataItem));
            } else {
                this.videoArr.push(dataItem);
                this.tempVideoArr.push(dataItem);
            }
        },
        handlePreviewData(dataItem, isImage = true, isAll = false) {
            if (isAll) {
                if (isImage) {
                    this.handlePushImage(dataItem);
                } else {
                    this.handlePushVideo(dataItem);
                }
                return;
            }
            if (isImage) {
                this.handlePushImage(dataItem);
            } else {
                this.handlePushVideo(dataItem);
            }
        },
        /**
         *     处理传入的文件
         * 注意：传入的文件名称 的key是 name 而不是fileName
         * */
        handleDefaultPrivew() {
            this.clear();
            if (this.useImage && this.useVideo) {
                // 都使用
                this.defaultImageOrVideoList.forEach((item, index) => {
                    this.handlePreviewData(item, item[this.fileSuffix] !== 'mp4', true);
                });
            } else if (this.useImage) {
                this.defaultImageList.forEach((item, index) => {
                    this.handlePreviewData(item, true);
                });
            } else {
                this.defaultVideoList.forEach((item, index) => {
                    this.handlePreviewData(item, false);
                });
            }
            // #ifndef MP-WEIXIN
            this.$forceUpdate();
            // #endif
        },
        // 预览视频
        fnPreviewVideo(video) {
            this.$emit('on-pre-video', video);
        },
        // 重置相关变量
        clear() {
            this.tempImgArr = [];
            this.tempVideoArr = [];
            this.imgArr = [];
            this.videoArr = [];
            this.overSizeImgArr = [];
            this.overSizeVideoArr = [];
        }
    }
};
</script>

<style lang="scss" scoped>
@import './evan-iconfont.css';
.upload-wrap {
    display: flex;
    flex-wrap: wrap;
}
.progress-wrapper {
    padding: 30rpx;
    padding-bottom: 16rpx;
}
.progress-tip {
    font-size: 28rpx;
    text-align: center;
}
.preview-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    .image,
    .video {
        position: relative;
        margin: 8rpx;
        box-sizing: border-box;
        width: 156rpx;
        height: 152rpx;
        video {
            width: 100%;
            height: 100%;
        }

        .cover {
            position: relative;
            width: 100%;
            height: 100%;
            // background-color: #000000;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 6rpx;
            .icon {
                position: absolute;
                top: 10rpx;
                right: 10rpx;
                z-index: 10;
                box-sizing: border-box;
                background-color: #fa3534;
                border-radius: 100%;
                width: 36rpx;
                height: 36rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }

            .play-icon {
                box-sizing: border-box;
                color: #ffffff;
                font-size: 60rpx;
                padding-top: 20rpx;
            }
            .play-text {
                margin-top: -20rpx;
                color: #ffffff;
                font-size: 24rpx;
            }
        }
    }
    .image {
        width: 156rpx;
    }
    .video {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.no-mask {
            &::after {
                display: none;
            }
        }
        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: var(--radius);
            background-color: rgba(0, 0, 0, 0.3);
        }
        .video-play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 4rpx solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            &-icon {
            }
        }
        .video-play-cover {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 12rpx 0;
            border: 2rpx solid #eee;
            background-color: #f2f2f2;
            &-image {
                width: 100%;
                height: 100%;
                z-index: 2;
            }
        }
        .video-play-cover-icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 120rpx;
            font-size: 110rpx;
            border: 2rpx solid #eee;
            background-color: #f2f2f2;
        }
        .video-play-name {
            width: 150rpx;
            position: absolute;
            bottom: 10rpx;
            font-size: 24rpx;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .delete-icon {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 10;
        box-sizing: border-box;
        background-color: #fa3534;
        border-radius: 100%;
        width: 36rpx;
        height: 36rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .delete-cover {
        width: 160rpx;
        height: 152rpx;
        position: relative;
        background-color: transparent;
        z-index: 2;
        .icon {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            z-index: 10;
            box-sizing: border-box;
            background-color: #fa3534;
            border-radius: 100%;
            width: 44rpx;
            height: 44rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    }
}
.select-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    box-sizing: border-box;
    border: 2rpx dashed #dadada;
    margin: 8rpx;
    width: 156rpx;
    height: 152rpx;
    border-radius: 6rpx;
    .icon {
        margin-top: 16rpx;
        z-index: 3;
    }
    .e-icon-video {
        color: #999 !important;
        font-size: 40rpx;
        margin-top: 14rpx;
    }
    .text {
        color: #999;
        font-size: 24rpx;
    }
}
.over-size-wrapper {
    box-sizing: border-box;
    margin: 8rpx;
    padding: 10rpx;
    width: 100%;
    border-radius: 6rpx;
    border: 2rpx dashed #ddb880;
    &.in-modal {
        margin: 0;
    }
    &-title {
        display: flex;
        margin-bottom: 10rpx;
        color: red;
        font-size: 24rpx;
        &-tip {
            flex-grow: 1;
        }
        &-clear {
            width: 150rpx;
            text-align: right;
            font-size: 24rpx;
            color: #ddb880;
            &-icon {
            }
        }
    }
    &-list {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        &-item {
            position: relative;
            width: 25%;
            padding: 6rpx;
            &-image {
                width: 100%;
                height: 130rpx;
            }
            &-name {
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 24rpx;
            }
            &-size {
                position: absolute;
                top: 105rpx;
                right: 6rpx;
                left: 6rpx;
                text-align: center;
                padding-right: 10rpx;
                font-size: 24rpx;
                background: #d6c09fa8;
                color: #fff;
            }
        }
    }
}
</style>

 components/evan-upload/evan-utils.js

New file
@@ -0,0 +1,68 @@
/**
 * 获取文件扩展名
 */
export function getFileSuffix(str) {
    if (str) return str.substring(str.lastIndexOf('.') + 1, str.length)
    return ''
}

/**
 * 文件大小单位转换
 * from:原数据
 *  to :类型 M kb b
 * */
export function getFileUnitConversion(byte, from = 'B', to = 'M') {
    from = from
        .toString()
        .toUpperCase()
        .trim();
    to = to
        .toString()
        .toUpperCase()
        .trim();
    switch (to) {
        case 'M':
            if (from == 'B') return (byte / Math.pow(1024, 2)).toFixed(2);
            if (from == 'KB') return (byte / 1024).toFixed(2);
            return (0).toFixed(2);
        case 'KB':
            if (from == 'M') return (byte * 1024).toFixed(2);
            if (from == 'B') return (byte / 1024).toFixed(2);
            return (0).toFixed(2);
        case 'B':
            if (from == 'M') return (byte * Math.pow(1024, 2)).toFixed(2);
            if (from == 'KB') return (byte * 1024).toFixed(2);
            return (0).toFixed(2);
        default:
            return (0).toFixed(2);
    }
};

/**
 *   图片预览
 * @param {Number} current = [value]  索引
 * @param {Array} images = [value]  图片数组
 * @param {String} oUrlKey = [value]  图片的原图地址Key
 */
export function previewImages(current, images, oUrlKey = 'url') {
    const urls = images.map(it => {
        return it[oUrlKey];
    });
    uni.previewImage({
        current,
        urls,
        loop: true,
        indicator: 'number',
        longPressActions: {
            itemList: ['保存图片'],
            success: res => {
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: res => {
                        console.log('图片保存成功');
                    }
                });
            }
        }
    });
}

 config

File was deleted

 description

File was deleted

 hooks/applypatch-msg.sample

File was deleted

 hooks/commit-msg.sample

File was deleted

 hooks/fsmonitor-watchman.sample

File was deleted

 hooks/post-update.sample

File was deleted

 hooks/pre-applypatch.sample

File was deleted

 hooks/pre-commit.sample

File was deleted

 hooks/pre-merge-commit.sample

File was deleted

 hooks/pre-push.sample

File was deleted

 hooks/pre-rebase.sample

File was deleted

 hooks/pre-receive.sample

File was deleted

 hooks/prepare-commit-msg.sample

File was deleted

 hooks/push-to-checkout.sample

File was deleted

 hooks/update.sample

File was deleted

 info/exclude

File was deleted

 objects/3c/926a7cc47bb1137cc7b3e1582e62658c450f62

Binary files differ

 objects/8f/e8a906a5a5cc31c8aee6953db98ab275def06d

File was deleted

 objects/f2/09a1c0d17bfaa9e4b82b6f13b0324bf3fbf88b

Binary files differ

 pages/taskinfo/eventsReported.vue

@@ -40,7 +40,8 @@
            </u-action-sheet> -->
            
            <u-form-item label-position="top" label-width="25%" label="图片上传:">
                <u-upload ref="uUpload" :header="header" :action="uploadApi" max-count="5" ></u-upload>
                <!-- <u-upload ref="uUpload" :header="header" :action="uploadApi" max-count="5" ></u-upload> -->
                <evan-upload ref="evanUpload" :imgLimit="4" :options="uploadOption" @on-upload="onUpload"></evan-upload>
            </u-form-item>
            
            <u-form-item label-position="top" label="备注:">
@@ -51,6 +52,7 @@
        <view class="submitBtn">
            <u-button @click="submit">提交</u-button>
        </view>
		
    </view>

</template>
@@ -59,7 +61,9 @@
import {clientId,clientSecret} from '@/common/setting'
import {add} from "@/api/eventgm/eventgm.js"
import {getDicList} from "@/api/dict/dict.js"
import evanUpload from "@/components/evan-upload/evan-upload.vue";
export default {
    components: {'evan-upload' :evanUpload },
    data() {
        return {
            form: {
@@ -91,6 +95,11 @@
            //换用其他写法
            uploadApi:"http://localhost/blade-resource/oss/endpoint/put-file-attach",
            header:{},
            uploadOption:{
                url:"http://localhost/blade-resource/oss/endpoint/put-file-attach",
                header:{},
            },
            uploadList:[],
            showType:false,
            typeList:[],
            showState:false,
@@ -119,11 +128,14 @@
    methods:{
        getHeader(){
            let accessToken = uni.getStorageSync('accessToken');
            var myHeader = {}
            if (accessToken) {
                this.header['Blade-Auth'] = 'bearer ' + accessToken;
                myHeader['Blade-Auth'] = 'bearer ' + accessToken;
            }
            // 客户端认证参数
            this.header['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
            myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
            this.header = myHeader
            this.uploadOption.header = myHeader
        },
        getAddress(){
            uni.getLocation({
@@ -131,7 +143,6 @@
                isHighAccuracy:true,
                geocode:true,
                success: res=> {
                    console.log(res)
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                    this.form.longitude = res.longitude
@@ -180,12 +191,23 @@
        submit(){
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    let lists = this.$refs.uUpload.lists
                    if(lists.length>0){
                        lists.forEach(e=>{
                    // let lists = this.$refs.uUpload.lists
                    // if(lists.length>0){
                    //     lists.forEach(e=>{
                    //         this.form.picUrls.push({
                    //             label:e.response.data.name,
                    //             value:e.response.data.link
                    //         })
                    //     })
                    // }else{
                    //     this.form.picUrls = null
                    // }
                    if(this.uploadList.length>0){
                        this.uploadList.forEach(e=>{
                            var res = JSON.parse(e.url)
                            this.form.picUrls.push({
                                label:e.response.data.name,
                                value:e.response.data.link
                                label:res.data.name,
                                value:res.data.link
                            })
                        })
                    }else{
@@ -200,6 +222,23 @@
                    })
                } 
            });
        },
        onUpload(res){
            this.uploadList = res.data
            if(this.$refs.evanUpload.imgArr.length>0){
                this.$refs.evanUpload.imgArr.forEach(e=>{
                    var res = JSON.parse(e.url)
                    e.thumbnail = res.data.link
                })
            }
			
            if(this.$refs.evanUpload.videoArr.length>0){
                this.$refs.evanUpload.videoArr.forEach(e=>{
                    var res = JSON.parse(e.url)
                    e.thumbnail = res.data.link
                })
            }
			
        }
    }
};

 refs/remotes/origin/master

File was deleted