auto-upload | 是否自动上传文件 |
show-file-list | 是否显示已上传文件列表 |
有了这个就不需要写接口 将文件传到后端 不是通过axios发送文件了
action | 请求 URL |
:file-list="fileList" 当状态改变触发on-change文件信息就会在fileList
file-list / v-model:file-list | 默认上传文件 |
on-change | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 |
<el-upload
:auto-upload="false"
:show-file-list="false"
accept=".xlsx, .xls"
action="/import/student"
:file-list="fileList"
:on-change="onChange"
:on-success='successFn'
ref="uploadRef"
>
<el-button type="primary" v-if="!fileName">选择文件</el-button>
<el-button type="primary" v-else @click.prevent.stop="submitFile">导入文件</el-button>
</el-upload>
const fileList = ref([]);
const submitFile=()=>{
uploadRef.value.submit()//触发外部方法 手动上传文件
}
---------------------------------------------------------------------------------------------------------------------------------
<el-form-item label="更换封面" prop="file">
<!-- limit 允许上传数量 auto-upload是否自动上传-->
<el-upload
v-model:file-list="coverInfo.file"
:auto-upload="false"
:limit="1"
accept=".png,.jpg"
>
<el-button type="primary">选择图片</el-button>
<template #tip>
建议: 课程封面大小建议上传1125*633,不超过5M,格式为.jpg,.png
</template>
</el-upload>
</el-form-item>
<el-button type="primary" @click="submitQuit">确定</el-button>
const submitQuit = () => {
// 提交封面信息 通过rules验证
coverFormRef.value.validate(async (value) => {
if (value) {
let formData = new FormData();
let coverInfoValue = coverInfo.value;
// 有要传的图片地址时候 (flie有值)
if (coverInfoValue.file.length) {
// 下面的append就是将文件类型的数据与普通类型进行结合
// 有文件类型需要手动提交 这里是图片需要formdata就是将表单数据进行整理 整理到可以让那个后端解析的程度
// 文件信息
formData.append("file", coverInfoValue.file[0].raw);
}
formData.append("description", coverInfoValue.description);
formData.append("courseName", props.course.courseName);
const { data } = await reviseCover(formData);//reviseCover是接口 将要改变的文件发给后端
if (!data.code) {
// 成功
ElMessage.success(data.txt);
isDrawer.value = false;
activeName.value = "first";
emit("change");
} else {
ElMessage.error(data.txt);
}
}
});
}
};