我二開(kāi)一個(gè)上傳文檔的功能，上傳后應(yīng)該有展示列表的，但是沒(méi)有展示，下面時(shí)我的完整代碼，有大佬遇到過(guò)嗎
<template>
<el-dialog :visible.sync="modals" title="請(qǐng)上傳報(bào)告" 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文件，且不超過(guò)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; // 設(shè)置訂單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>
