xiamen-sb-uniapp/pages/equipment-file/equipment-img.vue

<template>
    <view class="mt-3 px3">
        <view class="f-size-30 f-weight-bold py2 border-bottom my3">设备图片</view>
        <u-upload
            width="180"
            height="180"
            :action="action"
            :file-list="fileList"
            max-count="3"
            :max-size="5 * 100 * 1024"
            @on-success="uploadSuccess"
            @on-remove="uploadRemove"
            :before-upload="beforeUpload"
            :header="header">
        </u-upload>
        <view class="d-flex j-around a-center footer">
            <view
                class="main-color-bg text-color-white common"
                @tap="handleSubmit"
            >提交</view
            >
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            infoData: {},
            detailId: '',
            fileList: [],
            action: this.$BaseTool.UserUtil.getUploadUrl(),
            header: {
                Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
            },
            imagesList: []
        };
    },
    onLoad(options) {
        this.detailId = options.detailId;
        this.initData();
    },
    methods: {
        initData() {
            this.$Http
                .fetchSbInfoIgnores({
                    id: this.detailId
                })
                .then((res) => {
                    this.fileList = res.data.sbFileList
                    this.imagesList = JSON.parse(JSON.stringify(res.data.sbFileList))
                    this.fileList.forEach((d) => {
                        d.url = this.$BaseTool.UserUtil.getFileUrl(d.url);
                    });
                });
        },
        // 删除成功
        uploadRemove(index, lists, name) {
            this.fileList = lists;
            this.imagesList.splice(index, 1)
            console.log(this.imagesList);
        },
        // 上传成功
        uploadSuccess(data, index, lists, name) {
            this.fileList = lists;
            this.imagesList.push(data.data)
            console.log(this.imagesList);
        },
        // 上传前登录校验：u-upload 直传不走统一请求拦截，未登录不会触发 401 登录弹框，需在此拦住
        beforeUpload() {
            return this.$Http.requireLogin(null, '上传设备图片需要先登录，是否登录？');
        },
        handleSubmit() {
            if (!this.$Http.requireLogin(null, '保存设备图片需要先登录，是否登录？')) {
                return
            }
            const params = {
                sbFileList: this.imagesList,
                id: this.detailId
            };
            this.imagesList.map((item) => {
                return item.url;
            });
            this.$Http.updateSbInfoImagesIgnores(params).then((res) => {
                uni.showToast({ title: '添加成功' });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.main {
  .img {
    width: 76rpx;
    height: 76rpx;
    border-radius: 10rpx;

    image {
      width: 76rpx;
      height: 76rpx;
      border-radius: 10rpx;
    }
  }

  .content {
    .text-color-3 {
      width: 500rpx;
    }
  }
}

.footer {
    bottom: 150rpx;
    left: 0;
    right: 0;
    z-index: 10000;
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
        padding: 15rpx 200rpx;
        border-radius: 30rpx;
        background-color: #0082ff;
        color: #fff;
    }
}
</style>