多图上传原理、封装及使用

1上传原理

图片上传是通过单图片上传接口通过循环进行多图上传

2接口封装

//上传文件
export const upload = function(img_url, callback,callback2) {
    let header = {}
    const uploadTask = uni.uploadFile({
        header,
        url: url + 'api/common/qiniu_upload',
        filePath: img_url,
        name: 'file',
        success(res) {
            if (res) {
                // console.log(res)
                if (res.statusCode == 200 && res.data) {
                    let d = JSON.parse(res.data);
                    // console.log(d.data)
                    callback(d.data)
                }
            }
        },
        fail(err) {
            Api.toast('上传失败！', err);
        }
    })
    uploadTask.onProgressUpdate((res) => {
        callback2(res)
        // console.log('上传进度', res.progress)
        // console.log('已经上传的数据长度', res.totalBytesSent)
        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    })
}

3使用方法

//通过按钮执行add_imgs()即可
import { upload } from '@/common/apiUrl.js'
export default {
    data() {
        return {
            lng:9,
            imgs:[],
            imgs_u:[],
        }
    },
    methods: {
        add_imgs() {
            var t=this;
            if(t.imgs.length >= t.lng){
                t.api.toast('最多只能上传9张病例照片');
                return false;
            }
            t.api.up_imgs((t.lng-t.imgs.length),(res)=>{
                // console.log(res)
                t.imgs_u = res;
                uni.showLoading({ title:'上传中' });
                setTimeout(()=>{
                    t.upload_imgs();
                },100)
            })
        },
        upload_imgs(){
            var t=this;
            let imgs_u=t.imgs_u;
            if(imgs_u.length==0){
                uni.hideLoading();
                this.$emit('changes',t.imgs);
                t.api.toast('上传成功');
                return;
            }
            upload(imgs_u[0],(url)=>{
                // console.log(url)
                t.imgs.push(url);
                imgs_u.splice(0, 1)
                t.imgs_u=imgs_u;
                t.upload_imgs();
            },(res)=>{
                // console.log('上传进度' + res.progress);
            })
        },
    }
}

多图上传模块封装

如果项目中出现多个多图上传方法可以将多图上传封装成模块进行使用

<template>
    <view class="photos">
        <view class="photos_li" v-for="(li,i) in imgs" :key="i">
            <image class="li_img" :src="li" @click="show_img(i)" mode=""></image>
            <image class="li_close" @click="del_img(i)" src="../../static/images/login-alert-icon.png" mode=""></image>
        </view>
        <view class="photos_li photos_li_only flex_center" v-if="imgs.length<lng" @click="add_imgs">
            <image class="li_img" src="../../static/images/add_img.png" mode=""></image>
        </view>
    </view>
</template>

<script>
    import { upload } from '@/common/apiUrl.js'
    export default {
        name: 'ComImgs',
        props: {
            img:{
                type: Array,
                default: []
            },
            len: {
                type: Number,
                default: 9
            },
        },
        data() {
            return {
                lng:9,
                imgs:[],
                imgs_u:[],
            }
        },
        mounted() {
            this.lng=this.len;
            this.imgs=this.img;
        },
        methods: {
            add_imgs() {
                var t=this;
                if(t.imgs.length >= t.lng){
                    t.api.toast('最多只能上传9张病例照片');
                    return false;
                }
                t.api.up_imgs((t.lng-t.imgs.length),(res)=>{
                    // console.log(res)
                    t.imgs_u = res;
                    uni.showLoading({ title:'上传中' });
                    setTimeout(()=>{
                        t.upload_imgs();
                    },100)
                })
            },
            upload_imgs(){
                var t=this;
                let imgs_u=t.imgs_u;
                if(imgs_u.length==0){
                    uni.hideLoading();
                    this.$emit('changes',t.imgs);
                    t.api.toast('上传成功');
                    return;
                }
                upload(imgs_u[0],(url)=>{
                    // console.log(url)
                    t.imgs.push(url);
                    imgs_u.splice(0, 1)
                    t.imgs_u=imgs_u;
                    t.upload_imgs();
                },(res)=>{
                    // console.log('上传进度' + res.progress);
                })
            },
            del_img(i){
                var t=this;
                t.imgs.splice(i, 1)
                this.$emit('changes',t.imgs);
            },
            show_img(i){
                var t=this;
                t.api.show_imgs(i,t.imgs)
            },
        }
    }
</script>
<style lang="scss" scoped>
    .photos{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .photos_li{
            position: relative;
            width:200rpx;
            height: 200rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            background-color: #f6f8f7;
            &:nth-child(3n){
                margin-right: 0;
            }
            .li_img{
                display: block;
                width: 100%;
                height: 100%;
            }
            .li_close{
                position: absolute;
                top: -10rpx;
                right: -10rpx;
                width: 32rpx;
                height: 32rpx;
                z-index: 2;
            }
            &.photos_li_only{
                .li_img{
                    display: block;
                    width: 100rpx;
                    height: 100rpx;
                }
            }
        }
    }
</style>

使用方法如下：

<view class="obox">
    <com-imgs :img="imgs" :len="6" @changes="img_c"></com-imgs>
</view>

import ComImgs from '@/pages/com/com-imgs.vue'\
export default {
    components: { ComImgs },
    data() {
        return {
            imgs:[],
        }
    },
    methods: {
        img_c(e){
            console.log(e)
            this.imgs=e;
        },
    }
}