uniapp多图上传--vue

累的一批啊 被公司抓来写小程序 用uniapp~~~先上代码吧

初始化加载原先保存的 可删除可更新

image.png

<template>
    <view class="grace-margin">
        <form @submit="formSubmit" class="grace-form">
            <view class="cu-bar bg-white margin-top">
                <view >图片上传</view>
                <!-- <view class="action">{{ imgList.length }}/3</view> -->
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="item.file">
                        <image :src="item.path" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgList.length < 8"><text class="cuIcon-cameraadd"></text></view>
                </view>
            </view>
            <view style="padding:22upx 0;">
                <button formType="submit" type="primary" style="width:100%;text-align: center;background-color: #00CAAB;">提交</button>
            </view>
        </form>
    </view>
</template>
------------------------------------------------------

data() {
            return {
                imgList: [],
                token: 0,
                user_info_id:0
            }
        },
        components: {
            uniNumberBox
        },
        onLoad: function(option) {
            var that = this;
            that.token = uni.getStorageSync('token');
            
            uni.getStorage({
                    key: 'userinfo',
                    success: function(res) {
                        bofu.ajax('/home/client/getuserimg', {
                            user_info_id: res.data.user_info_id
                        }, function(res) {

                            if (res.data.code == 1) {
                                for (const key in res.data.data) {
                                    that.imgList.push(res.data.data[key])
                                }
                            } 
                        });

                    }
                })

ChooseImage() {
                var that = this;

                uni.chooseImage({
                    count: 4, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        uni.uploadFile({
                            url: '', 接口地址
                            filePath: tempFilePaths[0],
                            name: 'imgName',
                            header: {
                                'content-type': 'application/x-www-form-urlencoded',
                                'token': that.token
                            },
                            formData: {},
                            success: (uploadFileRes) => {
                                console.log('uploadFileRes');
                                console.log(uploadFileRes);
                                console.log(uploadFileRes.data);
                                uploadFileRes.data = JSON.parse(uploadFileRes.data).data;
                                if (this.imgList.length != 0) {
                                    this.imgList = this.imgList.concat({
                                        path: chooseImageRes.tempFilePaths,
                                        url: uploadFileRes.data
                                    })
                                } else {
                                    this.imgList = [{
                                        path: chooseImageRes.tempFilePaths,
                                        url: uploadFileRes.data
                                    }]
                                }
                            }
                        });
                    }
                });
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg(e) {
                uni.showModal({
                    title: '删除',
                    content: '确定要删除这张图片吗？',
                    cancelText: '再看看',
                    confirmText: '删除',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1);
                        }
                    }
                });
            },
            gohome(e) {
                uni.navigateTo({
                    url: '../../pages/index/my',
                    // 跳转成功后刷新
                    success: function(e) {
                        var page = getCurrentPages().pop();
                        if (page == undefined || page == null) return;
                        page.onLoad();
                    }
                });
            },
            
            // console.log(that.imgList[i].url);
            // student_card.push(that.imgList[i].url)
            formSubmit: function(e) {
                console.log('图');
                var that = this
                console.log(that.imgList);
                
                var student_card = [];
                for (var i in that.imgList) {
                    //////////////////////////////////////////////////////
                    if(that.imgList[i].url){
                        student_card.push(that.imgList[i].url)
                    }else{
                        student_card.push(that.imgList[i].path)
                    }
                };
                // console.log(student_card);
                // return;
                uni.getStorage({
                    key: 'userinfo',
                    success: function(res) {
                        bofu.ajax('/home/client/updateuserImg', {
                            user_info_id: res.data.user_info_id,
                            student_card:student_card
                        }, function(res) {
                            // console.log(res.data,'aaaaaa')
                            if(res.data.code==1){
                                 uni.showToast({
                                    title: '提交成功~',
                                    icon: 'none'
                                });
                                setTimeout(function() {
                                    that.gohome()
                                }, 1000);
                                
                            }else{
                                uni.showToast({
                                    title: '操作失敗',
                                    icon: 'none'
                                });
                            }
                        });
                
                    }
                })