<template>
<div class="clearfix">
<el-upload action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
:on-remove="remove"
:on-change="change"
multiple>
<el-button> 选择文件 </el-button>
</el-upload>
<el-button
:disabled="fileList.length === 0"
:loading="uploading"
@click="handleUpload">
{{ 'uploading' ? '上传' : '上传中' }}
</el-button>
</div>
</template>
<script>
import { post } from '../api/http'
import { ElMessage } from 'element-plus'
export default {
data () {
return {
fileList: [],
uploading: false,
returnData: []
}
},
methods: {
getToday () {
const NowDate = new Date()
const year = String(NowDate.getFullYear())
const month = String(NowDate.getMonth() < 9 ? '0' + (NowDate.getMonth() + 1) : (NowDate.getMonth() + 1))
const day = String(NowDate.getDate() < 10 ? '0' + NowDate.getDate() : NowDate.getDate())
return String(year + month + day)
},
remove (file) {
const index = this.fileList.indexOf(file)
const newFileList = this.fileList.slice()
newFileList.splice(index, 1)
this.fileList = newFileList
},
change (file) {
this.fileList.push(file)
console.log(this.fileList[0])
},
handleUpload () {
for (let i = 0; i < this.fileList.length; i++) {
this.uploading = true
const formData = new FormData()
formData.append('data_type', 'JV')
formData.append('test_time', this.fileList[i].name.split('-')[0])
formData.append('created_at', this.getToday())
formData.append('process_id', this.fileList[i].name.split('-')[1])
formData.append('sample_id', this.fileList[i].name.split('-')[2])
formData.append('data_name', this.fileList[i].name)
// 这是重点,在 this.fileList[i]后加上.raw就可以成功上传至后端服务器中
formData.append('data', this.fileList[i].raw)
formData.append('userinfo', localStorage.getItem('card'))
post('submitExperiData/', formData
).then((response) => {
console.log(response)
}).catch(() => {
ElMessage.error(`${this.fileList[i].name}文件重名!!!`)
})
}
this.uploading = false
}
}
}
</script>
<style>
</style>
关于[object,object]解决办法
最新推荐文章于 2023-09-12 13:13:23 发布