二开使用el-upload时没有展示选择的文件

我二开一个上传文档的功能，上传后应该有展示列表的，但是没有展示，下面时我的完整代码，有大佬遇到过吗

<template>

<el-dialog :visible.sync="modals" title="请上传报告" class="order_box" :show-close="true" width="540px">

   <el-upload

     ref="upload"

     :action="fileUrl"

     :on-success="handleSuccess"

     :on-error="handleError"

     :on-preview="handlePreview"

     :on-remove="handleRemove"

     :file-list="fileList"

     :headers="header"

     :multiple="true"

     :auto-upload="false"

     :show-file-list="true"

     :data="uploadData">

     <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

   </el-upload>

   <span slot="footer" class="dialog-footer">

     <el-button @click="cancel('formValidate')">取消</el-button>

     <el-button type="success" @click="putUploadpdf">提交</el-button>

   </span>

 </el-dialog>

</template>

<script>

import Setting from '@/setting';

import { getCookies } from '@/libs/util';

import { uploadpdf,putRemarkData } from '@/api/order';

import axios from 'axios';

export default {

 name: 'orderPdfupload',

 data() {

   return {

     fileList: [{name: 'food.jpeg', url: 'https://th.zdwulian.com/uploads/attach/2024/05/20240515/47ae3b2e5af0d21816f0588e5d7f0cc8.png'}],

     modals: false,

     fileUrl: Setting.apiBaseURL + '/file/upload',

     header: {

       'Authori-zation': 'Bearer ' + getCookies('token'),

     },

     uploadData: {

       id: null,

       src:null,

     },

   };

 },

   props: {

       orderId: Number,

       },

 methods: {

   cancel(name) {

     this.modals = false;

   },

   putUploadpdf() {

     let uploadData = {

       id: this.orderId

     };

     this.uploadData.id = this.orderId; // 设置订单ID

     this.$refs.upload.submit(); // 提交上传

   },

   handleSuccess(response, file, fileList) {

         if (response.status === 200) {

           this.modals = false;

           const filePath = response.data.src;

           this.sendFilePathToServer(filePath);

           console.log(filePath)

         } else {

           this.$message.error('上传失败');

         }

       },

   handleError(err, file, fileList) {

     this.$message.error('上传失败');

   },

   sendFilePathToServer(filePath) {

       console.log('上传',filePath)

       this.uploadData.src=filePath

       let data ={

           id: this.orderId,

           src: this.uploadData

       }

        uploadpdf(data).then(async (res) => {

            this.$message.success(res.msg);

            this.modals = false;

        }).catch((res) => {

             this.$message.error(res.msg);

           });

       },

   handleRemove(file, fileList) {

       console.log(file, fileList);

   },

   handlePreview(file) {

       console.log('wjh123',file);

   }

 },

};

</script>

<style scoped>

.upload-demo {

 display: flex;

 align-items: center;

 justify-content: center;

 height: 180px;

 border: 1px dashed #409EFF;

 border-radius: 6px;

 background-color: #f5f7fa;

 overflow: hidden;

 margin-top: 20px;

}

</style>