upload.vue
<template>
<el-upload
action="/api/files/upload"
:auto-upload="false"
multiple
:limit="3"
:on-change="handleFilesChange"
:file-list="fileList"
>
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传 jpg、png、gif 文件,且不超过 200kb </div>
</el-upload>
<el-button size="small" type="primary" @click="uploadBatch">上传</el-button>
</template>
<script>
import {
uploadBatch } from '@/api/files'
export default {
data() {
return {
fileList: []
}
},
methods: {
// 多文件上传
uploadBatch() {
var formData = new FormData()
for (const item of this.fileList) {
formData.append('files', item.raw)
}
uploadBatch(formData).then(({
code }) => {
if (code === 20000) {
this.$message.success(`文件上传成功`)
}
})
},
handleFilesChange(file, fileList) {
this.fileList = fileList
}
}
}
</script>
api/files.js
import request from '@/utils/request'
// 多文件上传
export function uploadBatch(params) {
return request.post('/api/files/upload/batch', params)
}