手动上传设置:auto-upload="false"文章来源地址https://www.toymoban.com/news/detail-627039.html
<el-form
ref="formData"
class="formWidth"
:model="formData"
label-width="120px"
:rules="rules"
>
<el-form-item
label="数据"
class="uploadClass"
required
prop="fileList"
>
<el-upload
class="upload-demo"
action="#"
:on-change="handleChange"
:on-preview="handlePreview"
:auto-upload="false"
accept=".jpg, .jpeg, .png, .jfif"
:on-remove="handleRemove"
:file-list="formData.fileList"
multiple
:limit="1000"
>
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">jpg/png/jfif</div>
</el-upload>
</el-form-item>
</el-form>
<vxe-button
status="primary"
:loading="confirmLoading"
:content="confirmLoading ? '识别中' : '确认'"
@click="confirmInfo()"
size="small"
></vxe-button>
data() {
return {
// 上传参数
addModel: false,
formData: {
fileList: [],
},
rules: {
fileList: [
{ required: true, message: "请上传数据", trigger: "change" },
],
},
errorMsg: null, // 业务编码校验提示语
}
},
// 确认上传
async confirmInfo() {
// 整体表单校验
this.$refs.formData.validate(async (valid) => {
if (!valid) {
return false;
}
this.confirmLoading = true;
let pathUrl = [],i=0;
for (let list of this.formData.fileList) {
let targetRoute = `file/${list?.name}`;
await putFile(targetRoute, list.raw);
// 第一次上传oss的时候延迟5ms,用于oss上传函数请求成功并获得返回值,防止循环请求oss token获取函数
if (i == 0) await this.delay(500);
pathUrl.push(targetRoute);
i++;
}
//此处写请求函数
await this.$rquest.aaa()
});
},
// 延迟函数
async delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
},
// 上传之前校验
handleChange(file, fileList) {
let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
let typeInfo = ["jpg", "jpeg", "png", "jfif"];
fileName = fileName.toLowerCase();
if (!typeInfo.includes(fileName)) {
this.$message({
type: "warning",
message: "请上传jpg/png/jfif格式的图片",
});
// 过滤掉不符合条件的文件
this.formData.fileList = this.formData.fileList.filter(
(list) => list.uid != file.uid
);
return false;
}
// 存储符合条件的所有fileList数据
this.formData.fileList = fileList; // 存储上传的文件
},
handleRemove(file, fileList) {
// 执行移除方法的时候重新更新数据
this.formData.fileList = fileList;
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
文章来源:https://www.toymoban.com/news/detail-627039.html
到了这里,关于el-upload批量手动上传,并用form表单校验上传文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!