xiamen-sb-uniapp/pages/spare/spare-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="1"
            :max-size="5 * 100 * 1024"
            @on-success="uploadSuccess"
            @on-remove="uploadRemove"
            :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>
import {updateSparePartInfoImage} from "../../api/sqarepartmanage/sparepartinfo";

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
                .fetchSparePartInfo({
                    id: this.detailId
                })
                .then((res) => {
                    if(res.data.image){
                        this.fileList.push({url: res.data.image})
                        this.imagesList.push({url: res.data.image})
                        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) {
            console.log(data);
            this.fileList = lists;
            this.imagesList.push({url: data.data.url})
            this.imagesList.map((item) => {
                console.log(item.url);
            });
        },
        handleSubmit() {
            const params = {
                image: this.imagesList[0].url,
                id: this.detailId
            };
            this.imagesList.map((item) => {
                return item.url;
            });
            this.$Http.updateSparePartInfoImage(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>