<template>
<div>
<el-dialog title="111" :visible.sync="dialogVisible" width="400px" append-to-body>
<el-upload ref="upload" :limit="20" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"
name="files" :multiple="true" :action="baseURL" :headers="headers" :on-change="handleFileChange"
:before-remove="handleFileRemove" :auto-upload="false" :file-list="upload.fileList">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
dialogVisible: false,
upload: {
fileList: [],
fileName: ''
},
baseURL: window.env.BASE_API,
headers: { 'Content-Type': 'multipart/form-data', token: '' }
}
},
methods: {
// 上传发生变化钩子
handleFileChange(file, fileList) {
this.upload.fileList = fileList;
},
// 删除之前钩子
handleFileRemove(file, fileList) {
this.upload.fileList = fileList;
},
// 提交上传文件
submitFileForm() {
// 创建新的数据对象
let formData = new FormData();
// 将上传的文件放到数据对象中
// data.append("files", fileInput.files[0], "800+1200.jpg")
this.upload.fileList.forEach(file => {
formData.append('files', file.raw, file.name);
});
console.log("提交前", formData.getAll('files'))
// 自定义上传
this.uploadFile(formData).then(response => {
console.log(response);
}).catch(() => {
this.$message.error('上传失败!');
});
},
// 封装的上传请求
uploadFile(params) {
return axios.post(`${this.baseURL}/bookinfo/infoBase/import-data-mutl`, params,
{ headers: { 'Content-Type': 'multipart/form-data', token: '' } })
},
}
};
</script>
vue+element实现多文件上传
最新推荐文章于 2023-08-18 16:03:07 发布