最近、複雑な機能がたくさんあるバックグラウンドシステムを作りました。その中にはアップロード機能ポイントがあります。アップロードするときは、アップロードされたファイル形式の確認、アップロード数の制限、アップロードインターフェイスのカスタマイズ、ドラッグアンドドロップによるアップロード、削除、プレビュー、削除後の再アップロードが必要です。今すぐ計算（今回は前回アップロードしたキャッシュリストをクリアするため）などがあるので、この部分をよくまとめて、後で使用するときに直接移動するだけです。
アップロード機能
<el-table-column
prop="dataUpload"
label="资料上传"
width="440"
>
<template #default="{ row }">
<el-upload
class="upload-demo"
drag
action="#"
multiple
:disabled="isEdittable != 'true'"
:show-file-list="false"
:http-request="
(file) => uploadfile(file, row)
"
:before-upload="
(file) => beforeUpload(file, row)
"
:limit="
row.docType == 'other' ? 999 : 1
"
:on-exceed="exceedFile"
:ref="
(el) =>
setRefs(
el,
row.id
)
"
>
<el-icon class="el-icon--upload"
><upload-filled
/></el-icon>
<div
class="el-upload__text"
>
拖拽图片到此处，或
<em>点此处选择文件</em>
</div>
</el-upload>
</template>
</el-table-column>
<script setup>
// 获取当前上传文件的html元素
const setRefs = (el, id) => {
if (el) {
if (!itemRefs.value.some((item) => item.id == id)) {
itemRefs.value.push({
id: id,
el,
});
}
}
};
//上传文件前校验文件类型
const beforeUpload = (file, row) => {
// 做上传前的一些校验操作
};
// 超出限制文件数量的钩子函数
const exceedFile = () => {
message.warning("只能上传一个文件");
};
// 上传文件处理函数
const uploadfile = async (file, row) => {
if (file.file.size == 0) {
return message.warning("文件内容为空，无法上传");
}
form.set("file", file.file);
form.set("type", row.type);
form.set("id", row.id);
form.set("docType", row.docType);
const loading = loading.service({
fullscreen: true,
background: "rgba(0,0,0,0.7)",
text: "文件上传中",
});
try {
const res = await API.upload(form);
if (res.data.code === "000000") {
row.files.push({
name: res.data.name,
id: res.data.id,
nailid: res.data.nailid,
nailid: res.data.nailid,
});
loading.close();
message.success("文件上传成功");
} else {
message.error(res.data.message);
}
} catch (error) {
loading.close();
message.error("文件上传失败请重试");
} finally {
loading.close();
if (itemRefs.value.length > 0) {
itemRefs.value.forEach((item) => {
if (item.id == row.recordItemId) {
item.el.clearFiles();
}
});
}
}
};
</script>
まず、私が使用する ui コンポーネントは elementPlus なので、タグ名は el-upload です。
1.ドラッグアンドドロップを実現する
ドラッグ アンド ドロップ機能を実装したい場合は、el-upload タグにドラッグ属性を追加する必要があります。
2. 複数選択の実現
アップロード時に複数のファイルを選択する機能を実現したい場合は、el-uploadタグにmultiple属性を追加する必要があります。
3.編集可否制御機能
アップロードできるかどうかを確認したい場合は、el-upload タグに disabled 属性を追加する必要があります。
4.カスタムアップロード操作機能の実装
カスタム アップロード操作を実装する場合 (独自の関数を作成し、アップロード インターフェイスを定義する)、http-request 属性を el-upload タグに追加し、対応するメソッドを指定する必要があります。
5.アップロード後の検証操作機能を実現
アップロードする前に検証したい場合は、before-upload 属性を el-upload タグに追加し、対応するメソッドを指定する必要があります。
6.アップロード時にアップロードできるファイル数には制限があります
アップロード時にアップロードするファイルの数を制限したい場合は、el-upload タグに limit 属性を追加する必要があります。
7.アップロード制限を超えた場合に実行されるフック関数を実装
アップロードされるファイルの数が制限を超えてアップロードする場合は、on-exceed 属性を el-upload タグに追加し、対応するフック関数を追加する必要があります。
8. アップロードされたファイルの要素を取得したい場合は、 ref を追加する必要があります
アップロードしたファイルのhtml要素を取得したい場合はref属性を付加する必要がありますが、アップロードしたファイルのel-upload要素はv-forと同等に生成されるため、多くのel-upload要素を取得することになります。今回は、一意の ID が対応する el-upload 要素に 1 つずつ対応する必要があるため、対応する ID が存在します。
ダウンロード機能
ダウンロードの場合、バックエンドはファイル ストリームを返すため、ファイル ストリームを処理する必要があります。
// 处理下载文件的方法
function downLoadXls(res) {
const fileNames = res.headers["content-disposition"];
if (fileNames) {
//解码
const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1]);
// 处理返回的文件流
const content = res.data;
const blob = new Blob([content], {
type: "application/octet-stream; charset=utf-8",
});
if ("download" in document.createElement("a")) {
//非IE下载
const a = document.createElement("a"); //创建一个a标签
a.download = fileName; //指定文件名称
a.style.display = "none"; //页面隐藏
a.href = URL.createObjectURL(blob); // href用于下载地址
document.body.appendChild(a); //插到页面上
a.click(); //通过点击触发
URL.revokeObjectURL(a.href); //释放URL 对象
document.body.removeChild(a); //删掉a标签
} else {
//IE10 + 下载
navigator.msSaveBlob(blob, fileName);
}
}
}