首先element-ui中的上传组件是这样的
数据结构:
{
action:“”//上传的连接
filelist:'‘’//选种的文件集合
}
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
点击按钮后就自动根据action的地址上传,实际上是element-ui自动发送了post请求给action连接,但是我想要通过自己手动上传文件(图片/excel)
直接发送这个文件体
upload(){
this.request.post('/manage/uploadExcel',this.filelist).then(res=>{
alert(res.code)
})
},
游览器发现无负载,并且前端已经自动发送了一次请求给action,如果把action参数取消,控制台还会报错
为了实现手动上传文件,需要添加<el-Upload>的属性 http-request
实现方法:因为直接只用filelist发送请求时无法携带的,所以就用自定义方法接受filelist的文件
<el-upload
class="upload-demo"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:action="null"
:http-request="fileupdate"
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary" >导入excel数据 <i class="el-icon-circle-plus-outline"></i></el-button>
</el-upload>
fileupdate方法
fileupdate(item){
this.model=item.file
},
此时文件就已经赋值给自定义的数组model
再次使用axios发送post请求
upload(){
this.request.post('/manage/uploadExcel',this.model).then(res=>{
alert(res.code)
})
成功
第二种方法
关闭自动上传 手动按钮上传 :auto-upload=“false”
<el-upload
class="upload-demo"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
ref="upload"
:before-remove="beforeRemove"
:auto-upload="false"
multiple
:limit="3"
:on-success="handle_success"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
时间处理 axios提交请求
submitUpload() {
//this.$refs.upload.submit();
let file = this.$refs.upload.uploadFiles.pop().raw;//这里获取上传的文件对象
let formData = new FormData();
formData.append("file",file);
this.request.post("/app/uploadFiles",formData).then(res=>{
this.$message.success(res.data)
})},
其中如果图片是上传oss
**:on-success=“handle_success”**可以写入上传成功的逻辑
//和axios一样的回调
handle_success(res) {
console.log(res)
this.$message.success('图片上传成功')
},
自动上传中，可以使用header属性为action地址添加请求头
let headers=reactive(
{
Authorization: localStorage.getItem("token")
}
);
2023.vue3 element plus 更新…因为element ui快停止维护了,所以这里记录,upload组件实现都都多个文件文件一次请求上传(element 默认的多选上传是多次请求上传的)
<el-upload
:limit="4"
ref="upload"
class="upload-files"
action=""
name="files"
:on-exceed="handleExceed"
multiple
:auto-upload="false"
:file-list="fileList"
:on-success="uploadusccess"
:on-change="handleChange"
style="margin-top: 20px"
>
<template #trigger>
<el-button type="primary">选择图片<el-icon><DocumentAdd /></el-icon></el-button>
</template>
<el-button style="margin-left: 10px" class="ml-3" type="success" @click="updateinterUpload">
保存到<el-icon><Upload /></el-icon>
</el-button>
<template #tip>
<div class="el-upload__tip">
最多上传4张
</div>
</template>
</el-upload>
script
let fileList=ref([])
const loading = ref(false)
//加载动画
const handleExceed=(files, fileList) =>{
ElMessage.warning(`当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}
const handleChange = (file, files) => {
// file是当前上传的文件，files是当前选中的所有的文件，
fileList.value = files
console.log("当前选择文件"+files)
}
//上传
const updateinterUpload = async () => {
try {
loading.value=true
const formData = new FormData();
formData.append('name', 'myk');
fileList.value.forEach(item => {
console.log(item.raw);
formData.append('file', item.raw);
});
//检验是否赋值
console.log(formData.getAll('file'));
// 发送请求，注意 headers: {'Content-Type': 'multipart/form-data'}
const response = await request.post('/upload/imgs', formData);
console.log(response);
if (response.code === 200) {
loading.value=false
addformData.value.iimgUrl=response.data
ElMessage.success("操作成功");
} else {
ElMessage.error("操作失败");
}
} catch (error) {
console.error("上传失败", error);
ElMessage.error("上传失败");
}
};
ts版本
<template>
<el-upload
:limit="5"
class="upload-files"
name="file"
:on-exceed="handleExceed"
multiple
:auto-upload="false"
:file-list="fileList"
:on-change="handleChange"
style="margin-top: 20px"
>
<template #trigger>
<el-button type="primary"
>选择图片<el-icon><DocumentAdd /></el-icon
></el-button>
</template>
<el-button style="margin-left: 10px" class="ml-3" type="success" @click="updateInterUpload">
保存到<el-icon><Upload /></el-icon>
</el-button>
<template #tip>
<div class="el-upload__tip">最多上传4张</div>
</template>
</el-upload>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, UploadFile } from 'element-plus'
import request from '@/utils/request' // 根据实际项目路径调整
const props = defineProps({
successAction: {
type: Function,
required: true
}
})
let fileList = ref<UploadFile[]>([]) // 使用 UploadFile 类型
const loading = ref(false)
const handleExceed = (files: UploadFile[], fileList: UploadFile[]) => {
ElMessage.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}
const handleChange = (file: UploadFile, files: UploadFile[]) => {
fileList.value = files // 更新 fileList
console.log('当前选择文件', files) // 修正日志输出
}
const updateInterUpload = async () => {
try {
loading.value = true
const formData = new FormData()
fileList.value.forEach(item => {
if (item.raw) {
// 确保 item.raw 是文件对象
formData.append('file', item.raw) // 正确添加文件对象到 FormData
}
})
// 在控制台打印 FormData 中的文件，仅用于调试
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`)
}
// 发送包含文件的 FormData 到服务器
const response = await request.post('/product/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
// 处理响应
if (response.code === 0) {
loading.value = false
ElMessage.success('操作成功')
} else {
ElMessage.error('操作失败')
}
} catch (error) {
console.error('上传失败', error)
ElMessage.error('上传失败')
}
}
</script>
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
