tqApp-webView/components/uploadImg/index.vue

<!--
 * @Author: yangpeiqin
 * @Date: 2023-12-15 16:57:35
 * @LastEditors: yangpeiqin
 * @LastEditTime: 2023-12-15 17:30:29
 * @FilePath: \gdtq_admin_app移动端\components\uploadImg\index.vue
-->
<template>
    <view>
        <u-upload
            ref="uploadFile"
            :name="name"
            :multiple="true"
            :maxCount="maxCount"
            :fileList="fileList1"
            :sizeType="['compressed']"
            :width="width"
            :height="height"
            :capture="capture"
            :uploadText="uploadText"
            @afterRead="afterRead"
            @delete="deletePic"></u-upload>
    </view>
</template>

<script>
import { isEmpty } from 'lodash';
import * as imageConversion from 'image-conversion';
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            fileList1: [],
        }
    },
    methods: {
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList${event.name}`].length
            lists.map((item) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this[`fileList${event.name}`][fileListLen]
                this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {
                        user: 'test'
                    },
                    success: (res) => {
                        setTimeout(() => {
                            resolve(res.data.data)
                        }, 1000)
                    }
                });
            })
        },
    }

}
</script>

<style lang="scss" scoped>
	
</style>