uniapp 文件上传参考

1.需要先去引入插件市场的插件
https://ext.dcloud.net.cn/plugin?id=6701
2.代码
这里的按钮我是引入了uview的，直接复制的话会报错，根据项目需求自行更改

<template>
    <view>
        <view class="content">
            <u-button class="audit" @click="handlerClick" type="primary">
                上传</u-button>
            <view v-for="(item,index) in lists" class="text">
                {{item.fileName}}
                <u-icon @click="deleteItem(index)" name="close" style="margin-left: 20upx;" color="red" size="28">
                </u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    import appChooseFile from '@/js_sdk/appChooseFile/index.js'
    import {
        IMG_URL,
        API_URL
    } from '@/env'
    export default {
        name: "upload-file",
        props: {
            action: {
                type: String,
                default: '/file/web/add'
            },
            header: {
                type: Object,
                default () {
                    return {
                        Authorization: `Bearer ${uni.getStorageSync('tokenInfo') ? uni.getStorageSync('tokenInfo') : ''}`
                    };
                }
            },
            maxCount: {
                type: [String, Number],
                default: 52
            },
            showTips: {
                type: Boolean,
                default: true
            },
            fileList: {
                type: Array,
                default () {
                    return [];
                }
            },
            toJson: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                lists: []
            };
        },
        watch: {
            formData: function(val) {
                this.formData = val;
            },
            fileList: {
                immediate: true,
                handler(val) {
                    val.map(value => {
                        // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
                        // 时，会触发watch，导致重新把原来的图片再次添加到this.lists
                        // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
                        // {
                        //  "fileName": "1636506480(1)-已转档.pdf",
                        //  "fileUrl": "/dev-alone/uploadFiles/files/2021-12-15/1639548404742_822479.pdf"
                        // }
                        let tmp = this.lists.some(val => {
                                return val.fileUrl == value.fileUrl;
                            })
                            // 如果内部没有这个图片(tmp为false)，则添加到内部
                            !tmp && this.lists.push(value);
                    });
                }
            },
            // 监听lists的变化，发出事件
            lists(n) {
                this.$emit('on-list-change', n);
            }
        },
        methods: {
            deleteItem(index) {
                uni.showModal({
                    title: '提示',
                    content: '您确定要删除此项吗？',
                    success: async (res) => {
                        if (res.confirm) {
                            this.handlerDeleteItem(index);
                        }
                    }
                });
            },
            // 执行移除图片的动作，上方代码只是判断是否可以移除
            handlerDeleteItem(index) {
                this.lists.splice(index, 1);
                this.$forceUpdate();
                this.$emit('on-remove', index, this.lists, this.fileList);
                this.showToast('移除成功');
            },
            handlerClick() {
                if (this.maxCount <= this.lists.length) {
                    this.showToast('最多上传'+this.maxCount+'个文件');
                    return;
                }
                appChooseFile().then(path => {
                    uni.showLoading()
                    const task = uni.uploadFile({
                        // 这里可以手动配置一下baseUrl
                        url: IMG_URL + this.action,
                        filePath: path,
                        name: 'file',
                        // formData: this.formData,
                        header: this.header,
                        success: res => {
                            console.log(res);
                            // 判断是否json字符串，将其转为json格式
                            let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(
                                res
                                .data) : res.data;
                            if (![200, 201, 204].includes(res.statusCode)) {
                                this.uploadError(data);
                            } else {
                                // 上传成功
                                if (data.code == 401) {
                                    this.doRequest()
                                } else if (data.code != 200) {
                                    this.uploadError(data);
                                } else {
                                    console.log(data);
                                    this.lists.push(data.data)
                                    this.$emit('on-success', data,this.lists);
                                    uni.hideLoading();
                                }

                            }
                        },
                        fail: e => {
                            this.uploadError(e);
                        },
                        complete: res => {
                            this.$emit('on-change', res);
                        }
                    });
                    task.onProgressUpdate(res => {
                        if (res.progress > 0) {
                            this.$emit('on-progress', res);
                        }
                    });
                }).catch(() => {
                    this.lists.push({
                        "fileName": "1636506480(1)-已转档.pdf",
                        "fileUrl": "/dev-alone/uploadFiles/files/2021-12-15/1639548184077_416848.pdf"
                    })
                    uni.hideLoading();
                })
            },
            showToast(message, force = false) {
                if (this.showTips || force) {
                    uni.showToast({
                        title: message,
                        icon: 'none'
                    });
                }
            },
            uploadError(err) {
                uni.hideLoading();
                this.$emit('on-error', err);
                this.showToast('上传失败，请重试');
            },
        }
    }
</script>

<style scoped lang="scss">
    .audit {
        height: 50upx;
        line-height: 50upx;
        font-size: 26upx;
        width: 120upx;
        margin-left: 0;
        background-color: #529cf0;
        border-radius: 5upx;

        &::after {
            border-radius: 5upx;
        }
    }

    .text {
        // text-align: center;
    }
</style>