1.需求因为先不要上传服务器,而是选中文件,最后以FormData形式传递给后台
2.说一下el-upload的属性与方法,也是解题的关键
action=""是指上传莫某个服务器,我这里没用直接上传就用#表示
accept=“.apk” 限制选择文件的类型。因为我这里是还没上传服务器就要提前校验,用不了before-upload
on-preview 是点击文件返回的信息,这里没用到
on-remove 是删除文件返回的信息
multiple 是否支持多选文件,布尔类型
on-change 是文件状态改变时候的返回file信息,获取Files关键方法
before-upload 上传文件之前的钩子函数,一般做直接上传服务器前的校验限制
auto-upload 是否在选取文件后立即进行上传,对于不上传action的非常关键
file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url:
limit 最大允许上传个数
on-exceed 文件超出个数限制时的钩子
3.代码图下实现,主要是通过on-change事件获取到文件File
<el-form-item
:label="$t('manage.SWPkG') +':'"
:label-width="formLabelWidth"
class="fileupdown"
>
<el-input
placeholder="no file ..."
style="width: 76%"
class="input-with-select"
>
<el-upload
class="upload-demo"
slot="append"
action="#"
:on-change="handleChangePic"
:on-remove="handleRemoveApk"
accept=".apk"
:file-list="fileList"
:auto-upload="false"
>
<el-button
slot="trigger"
size="small"
type="success"
>choose apk file</el-button>
</el-upload>
</el-input>
</el-form-item>
<el-form-item class="fileupdown">
<el-input
placeholder="no file ..."
style="width: 76%"
class="input-with-select"
>
<el-upload
class="upload-demo"
slot="append"
action="#"
:on-change="handleChangeTxt"
:on-remove="handleRemoveTxt"
accept=".txt"
:file-list="fileLists"
:auto-upload="false"
>
<el-button
slot="trigger"
size="small"
type="success"
>choose text file</el-button>
</el-upload>
</el-input>
</el-form-item>
handleChangePic(file, fileList) {
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.apkFiles = fileList[0].raw;
},
handleChangeTxt(file, fileList) {
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.txtFiles = fileList[0].raw;
},
handleRemoveApk(file, fileList) {
console.log(file, fileList);
this.apkFiles = {};
},
handleRemoveTxt(file, fileList) {
console.log(file, fileList);
this.txtFiles = {};
},
confirmDialog() {
this.$refs["versionForm"].validate(valid => {
if (valid) {
if (
!this.versionForm.number ||
!this.versionForm.numberString ||
!this.versionForm.describe ||
JSON.stringify(this.apkFiles) === "{}" ||
JSON.stringify(this.txtFiles) === "{}"
) {
this.$alert(
this.$t("doctor.completeData"),
this.$t("doctor.message"),
{
confirmButtonText: this.$t("home.yes"),
callback: () => {}
}
);
return;
}
this.formData = new FormData();
this.formData.append("version", this.versionForm.number);
this.formData.append("versionName", this.versionForm.numberString);
this.formData.append("des", this.versionForm.describe);
this.formData.append("apk", this.apkFiles);
this.formData.append("mapper", this.txtFiles);
this.$confirm(this.$t("doctor.confirmSave"), this.$t("home.remind"), {
confirmButtonText: this.$t("home.yes"),
cancelButtonText: this.$t("home.cancel"),
type: "warning"
})
.then(() => {
api.uploadApk(this.formData).then(res => {
if (res.code == 0) {
this.isdisplayDialog = false;
this.$alert(res.msg, this.$t("doctor.message"), {
confirmButtonText: this.$t("home.yes"),
callback: action => {
return;
}
});
this.$emit("addgetList");
} else {
this.$message({
type: "error",
message: res.msg
});
}
});
})
.catch(() => {});
} else {
console.log("error submit!!");
return false;
}
});
}