更新记录

1.0.0（2023-06-17）

2.0

1.0（2023-05-30）

组件初始化

平台兼容性

使用方法

 <!-- photoList：选择的图片数组  @click：图片选择事件-->
<cc-uploadSomePic  :photoList="photoList" @click="addPhotoClick"></cc-uploadSomePic>

// 添加多张图片（少于6张）
addPhotoClick() {

                uni.hideLoading();

                let myThis = this;
                if (myThis.photoList.length >= 6) {
                    myThis.photoList = [];
                }
                uni.chooseImage({
                    count: 6,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {

                        for (let j = 0; j < res.tempFilePaths.length; j++) {

                            // name：服务端文件接受key  filePath: 需与服务端文件接收字段保持一致
                            let tmpdict = {
                                'name': 'image',
                                'filePath': res.tempFilePaths[j]
                            };
                            myThis.photoList.push(tmpdict);

                        }

                        console.log('选择图片 =' + JSON.stringify(myThis.photoList));
                    }
                });
            }

HTML代码部分

<template>
    <view class="content" v-if="seen">

        <form @submit="formSubmit" @reset="formReset">

            <view class="inputView">
                <text class="leftTitle">交通指引</text>
            </view>

            <textarea class="rightTextarea" name="direct" placeholder=" 请输入交通指引" />

            <view class="inputView">
                <text class="leftTitle">房屋介绍</text>
            </view>

            <textarea class="rightTextarea" name="village" placeholder=" 请输入房屋介绍" />

            <view class="inputView">
                <text class="leftTitle">添加房源照片（最多可添加6张）</text>

            </view>

            <!-- photoList：选择的图片数组  @click：图片选择事件-->
            <cc-uploadSomePic  :photoList="photoList" @click="addPhotoClick"></cc-uploadSomePic>

            <view class="uni-btn-v">
                <button class="botBtn" type="primary" form-type="submit">提交</button>
                <view class="tipText"> 注意事项: 请确保您填写的房屋信息真实无误 </view>

            </view>
        </form>
    </view>
</template>

JS代码 （引入组件 填充数据）

<script>
    import Vue from 'vue';

    export default {

        data() {

            return {
                photoList: [],
                seen: true,
                myParamData: {},
                isClick: false,

            };
        },

        onLoad: function(e) {

            if (typeof(e.myParamData) === 'string') {
                this.myParamData = JSON.parse(e.myParamData);
                console.log('页面3 数据 = ' + JSON.stringify(e));

            }

        },
        methods: {

            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));

                if (this.isClick) {
                    let that = this;
                    setTimeout(function() {
                        that.isClick = false;
                    }, 600)
                    return;
                }
                this.isClick = true;

                var formdata = e.detail.value;
                this.myParamData = Object.assign(this.myParamData, formdata);

                console.log('页面3 myParamData=' + JSON.stringify(this.myParamData));

                if (formdata['direct'].length < 2) {
                    uni.showModal({
                        content: '请输入交通指引',
                        showCancel: false
                    });
                    return;
                }
                if (formdata['village'].length < 2) {
                    uni.showModal({
                        content: '请输入所在小区介绍',
                        showCancel: false
                    });
                    return;
                }
                if (this.photoList.length < 1) {
                    uni.showModal({
                        content: '请添加房源照片',
                        showCancel: false
                    });
                    return;
                }
                if (this.photoList.length > 6) {
                    uni.showModal({
                        content: '最多只能选择提交6张图片',
                        showCancel: false
                    });
                    return;
                }

                uni.showLoading({
                    title: '上传中'
                })

                // 服务器地址上传地址 仅为示例，非真实的接口地址
                let baseUrl = "http://gzcc.com/cc//appSc/up"
                console.log('图片资源 = ' + JSON.stringify(this.photoList))
                console.log('请求参数 = ' + JSON.stringify(this.myParamData));
                uni.uploadFile({
                    url: baseUrl, //仅为示例，非真实的接口地址
                    files: this.photoList, //请求图片数组
                    formData: this.myParamData, //请求参数
                    success: (uploadFileRes) => {

                        uni.hideLoading();
                        console.log('上传成功 = ' + uploadFileRes.data);
                    }
                });

            },
            // 添加多张图片（少于6张）
            addPhotoClick() {

                uni.hideLoading();

                let myThis = this;
                if (myThis.photoList.length >= 6) {
                    myThis.photoList = [];
                }
                uni.chooseImage({
                    count: 6,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {

                        for (let j = 0; j < res.tempFilePaths.length; j++) {

                            // name：服务端文件接受key  filePath: 需与服务端文件接收字段保持一致
                            let tmpdict = {
                                'name': 'image',
                                'filePath': res.tempFilePaths[j]
                            };
                            myThis.photoList.push(tmpdict);

                        }

                        console.log('选择图片 =' + JSON.stringify(myThis.photoList));
                    }
                });
            }

        }
    };
</script>

CSS

<style>
    .uni-form-item .title {
        padding: 20rpx 0;
    }

    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .inputView {
        flex-direction: row;
        display: flex;
        height: 40px;
        align-items: center;
        width: 100%;
    }

    .line {
        width: 90%;
        height: 2rpx;
        margin-left: -2rpx;
        background-color: #f8f8f8;
        margin-left: 5%;
    }

    .leftTitle {
        margin-left: 40rpx;
        width: 284px;
        height: 32px;
        line-height: 32px;
        font-size: 28rpx;
        color: #333333;
    }

    .rightTextarea {

        margin-left: 5%;
        width: 90%;
        height: 106px;
        line-height: 40rpx;
        border-radius: 12rpx;
        border: solid 1px #F5F5F5;
        font-size: 15px;
    }

    .uni-btn-v {
        width: 100%;
        height: auto;
    }

    .botBtn {
        width: 90%;
        margin-top: 36px;
        height: 48px;
    }

    .tipText {
        width: 100%;
        margin-left: 0px;
        text-align: center;
        color: #666666;
        margin-top: 36px;
        margin-bottom: 36px;
        font-size: 28rpx;
    }
</style>