<template>
<div class="container page-card-box">
<div class="form-wrapper-box">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="文件:" prop="imagesPic">
<el-upload
class="upload-demo"
:action="`${baseUrl}/uploads/`"
:headers="upHeaders"
:http-request="handleUpload"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:file-list="fileList"
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传zip格式文件,且大小不超过50MB</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button style="width: 60%; margin-top: 60px" type="primary" @click="onSubmit">提 交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { MessageBox } from 'element-ui'
import { upload } from '@/api/common'
export default {
name: 'Diagnose',
components: {},
data() {
return {
baseUrl: '/', // 没有实际作用
upHeaders: null,
fileList: [],
imgUrlList: [],
form: {}
}
},
computed: {},
methods: {
onSubmit() {
},
resetForm() {
this.form = {}
this.fileList = []
this.imgUrlList = []
},
beforeUpload(file) {
const type = file.name.substring(file.name.lastIndexOf('.')) // 获取文件后缀,取文件格式
const isLt10M = file.size / 1024 / 1024 < 50
if (type !== '.zip') {
this.$message({ type: 'error', message: '只支持zip文件格式!' })
return false
}
if (!isLt10M) {
this.$message({
message: '上传文件大小不能超过 50MB!',
type: 'warning'
})
return false
}
},
// 自定义上传
handleUpload(op) {
console.log('upfile===>', op)
const file = op.file
// const fileType = params.type
const formData = new FormData()
formData.append('file', file)
upload(formData, res => {
op.onProgress(res)
})
.then(res => {
// console.log('up-res:====>', res)
op.onSuccess(res) // op.onSuccess({}) // 上传成功回调
})
.catch(error => {
// op.onError('文件上传失败(' + error.response.status + '),' + error.response.data)
op.onError()
const message = error.data && error.data.msg ? error.data.msg : '上传出错,请稍后再试'
this.$message({ message: message, type: 'warning' })
})
// axios({
// method: 'post',
// url: `${process.env.VUE_APP_BASE_API}/uploadFile`,
// headers: { 'Content-Type': 'multipart/form-data', Authorization: 'Bearer ' + getToken() },
// data: formData,
// onUploadProgress(progressEvent) {
// if (progressEvent.lengthComputable) {
// const percent = (progressEvent.loaded / progressEvent.total) * 100 || 0
// progressCallback({
// percent: percent
// })
// }
// }
// })
// .then(res => {
// console.log('up-res:====>', res)
// op.onSuccess('上传文件成功') // op.onSuccess({})
// })
// .catch(error => {
// console.log('upload file error:', error)
// const message = error.data.message ? error.data.message : '服务器错误'
// op.onError('文件上传失败(' + error.response.status + '),' + error.response.data)
// this.$message({ message: message, type: 'warning' })
// })
},
handleRemove(file) {
// console.log('remove_file', file)
if (file.response) {
// 本次上传的
this.imgUrlList.splice(
this.imgUrlList.findIndex(v => v.file_name === file.response.data.file_name),
1
)
} else {
this.imgUrlList.splice(
this.imgUrlList.findIndex(v => v.file_name === file.file_name),
1
)
}
},
handlePreview() {
// console.log(file);
},
handleSuccess(res) {
// console.log('file_upload_res===>', res)
// if (res.code === '0') {
// this.imgUrlList.push({ file_name: res.data.file_name, upload_time: res.data.upload_time })
// }
if (res.code === '0') {
// 只上传一个,取最后一个上传成功的文件
this.imgUrlList = [
{ file_name: res.data.file_name, upload_time: res.data.upload_time, hash_file: res.data.hash_file }
]
}
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`
)
},
handleLinkTo() {
this.$router.push({
path: '/record/index',
query: {}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
我封装了一个upload请求方法。代码逻辑,其实和注释掉的axios调用的上传方法类似。