ox_zhiNengZhuShou/src/subpackage/message/components/edit/upload_img.vue

<template>
    <view class="upload-img">
        <view class="ui-title">上传照片<text class="ut-txt">(最多上传{{ max }}张，只支持.jpg、png 格式)</text></view>
        <view class="ui-ls">
            <view class="ul-item" v-for="(e, i) in imgTemLs" :key="i">
                <image class="ui-pic" @click="previewImg(e)" mode="aspectFill" :src="e"></image>
                <image class="ui-close" @click="delImg(i)" mode="aspectFit" src="/subpackage/message/static/images/close.png"></image>
            </view>
            <view class="ul-item ul-add" @click="chooseImg" v-if="max > imgTemLs.length">
                <view class="ua-icon"></view>
                <view class="ua-txt">上传照片</view>
            </view>
        </view>
    </view>
</template>

<script>
import { showModal, jsonPar, showLoad, hideLoad, promisify } from "@/utils/util";
import server from "../../js/server";
import { MESSAGE_API } from "../../js/api";
export default {
    props: {
        max: {
            type: Number,
            default: 6
        }
    },
    data(){
        return {
            imgTemLs: [],
        }
    },
    methods: {
        chooseImg(){
            let { max } = this;
            uni.chooseImage({
                count: max,
                sourceType: ['album', 'camera'],
                success: (res) => {
                    let { imgTemLs, max } = this;
                    let _curImgNum = imgTemLs?.length ?? 0;
                    let _temImgNum = res?.tempFilePaths?.length ?? 0;
                    if((_curImgNum + _temImgNum) > max)return showModal({ content: `最多上传${max}张图片！` });
                    this.imgTemLs = imgTemLs.concat(res.tempFilePaths);
                }
            });
        },
        delImg(idx){
            this.imgTemLs.splice(idx, 1);
        },
        previewImg(url){
            uni.previewImage({ urls: this.imgTemLs, current: url });
        },
        async getUrls(){
            try{
                let _urls = [];
                let { imgTemLs } = this;
                showLoad('图片上传中...');
                for(let i = 0; i < imgTemLs?.length; i++){
                    let _url = await this.uploadImg(imgTemLs[i]);
                    if(_url !== '')_urls.push(_url);
                }

                if(_urls?.length < imgTemLs?.length){
                    let _showModal = promisify(showModal);
                    hideLoad();
                    if(_urls?.length === 0){
                        return _showModal({ content: '图片上传失败，请稍后重试' })
                        .then(_=>Promise.reject('全部图片上传失败'));
                    }

                    let _diffVal = imgTemLs?.length - _urls?.length;
                    return _showModal({
                        content: `${_diffVal}张图片上传失败`,
                        showCancel: true,
                        cancelText: '重试',
                        confirmText: '继续提交',
                    })
                    .then(res=>{
                        if(res.confirm)return { temps: imgTemLs, urls: _urls };
                        return Promise.reject(res);
                    })
                }
                hideLoad();
                return {
                    temps: imgTemLs,
                    urls: _urls,
                };
            }catch(err){
                hideLoad();
                console.warn('message components edit upload_img getUrls err --->', err)
            }
        },
        async uploadImg(url){
            try{
                let _imgInfo = await server.uploadFile({
                    url: MESSAGE_API.zs_message_imgs,
                    filePath: url,
                });
                if(_imgInfo.statusCode != 200)throw(_imgInfo);
                let _imgRes = jsonPar(_imgInfo.data);
                if(_imgRes.code != 0)throw(_imgRes);
                return _imgRes?.data?.url ?? '';
            }catch(err){
                // showModal({
                //     titile: '提示',
                //     content: err?.errMsg ?? err?.message ?? '上传图片失败！'
                // });
                console.warn('message components edit upload_img uploadImg err --->', err)
                // return Promise.reject(err);
                return '';
            }
        },

    }
}
</script>

<style lang="scss">
    .upload-img{
        padding: 30upx 18upx;
        border-radius: 20upx;
        background: #fff;
        .ui-title{
            padding: 0 10upx;
            @include flcw(32upx, 44upx, #333333);
            .ut-txt{
                font-size: 24upx;
                color: #9A9A9D;
            }
        }
        .ui-ls{
            margin-top: 24upx;
            font-size: 0;
            .ul-item{
                position: relative;
                margin: 0 10upx;
                vertical-align: top;
                display: inline-block;
                width: 200upx;
                height: 200upx;
                &:nth-of-type(n+4){
                    margin-top: 24upx;
                }
                .ui-pic{
                    width: 100%;
                    height: 100%;
                    border-radius: 10upx;
                }
                .ui-close{
                    position: absolute;
                    top: 6upx;
                    right: 6upx;
                    width: 40upx;
                    height: 40upx;
                }
            }
            .ul-add{
                padding-top: 36upx;
                border: 2upx solid #D8D8D8;
                .ua-icon{
                    position: relative;
                    margin: 0 auto;
                    width: 60upx;
                    height: 60upx;
                    &::before, &::after{
                        content: '';
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        display: block;
                        width: 100%;
                        height: 4upx;
                        background: #D8D8D8;
                    }
                    &::after{
                        transform: translate(-50%, -50%) rotate(90deg);
                    }
                }
                .ua-txt{
                    text-align: center;
                    margin-top: 28upx;
                    @include flcw(28upx, 40upx, #9A9A9D);
                }
            }
        }
    }
</style>