序文
台風の日は自宅でファイルダウンロード・アップロード機能の実現をレビュー！
ドキュメントをダウンロード
ボタンをクリックしてファイルをダウンロードするというビジネス シナリオは頻繁に発生します。
必要なデータ型をバックエンドに伝えるために、応答ヘッダーに responseType を設定する必要があります。
export const getCartTemplate = () =>
defHttp.get({
url: Api.api_get_cart_template,
// 确保获取类型正确的数据
responseType: 'blob',
headers: {
ignoreCancelToken: true,
},
});
データを取得したら、自動クリック用のタグを作成します。
// 这里的res即返回数据
const saveFile = (res) => {
let blob = new Blob([res], {
// 为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type 这里指定为.xlsx
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
});
// 创建一个临时的url指向blob对象
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
// 自定义文件名
a.download = fileName.value;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
};
Blob オブジェクトについて:
Blob(blobParts[, options])
- blobParts : 配列タイプ。配列内の各項目は接続されて Blob オブジェクトのデータを形成します。配列内の各要素は ArrayBuffer (バイナリ データ バッファー)、ArrayBufferView、Blob、DOMString にすることができます。または他の同様のオブジェクトの混合物。
- options : オプションの辞書形式タイプ。次の 2 つの属性を指定できます。
typeデフォルト値は "" で、BLOB に格納される配列コンテンツの MIME タイプを表します。
endings、デフォルト値は「transparent」です。これは、行終端文字 \n を含む文字列の書き込み方法を指定するために使用されます。これは、次の 2 つの値のいずれかです: 「ネイティブ」は、行末文字がホスト オペレーティング システムのファイル システムに適した改行文字に変更されることを示します。「透過」は、BLOB に保存される末尾文字が改行文字に変更されることを示します。変わらずに保たれている。
型 型参照:
| 内線 | MIME タイプ |
|---|---|
| .doc | アプリケーション/msword |
| 。ドット | アプリケーション/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .dotx | application/vnd.openxmlformats-officedocument.wordprocessingml.template |
| .docm | application/vnd.ms-word.document.macroEnabled.12 |
| .dotm | application/vnd.ms-word.template.macroEnabled.12 |
| .xls | アプリケーション/vnd.ms-excel |
| .xlt | アプリケーション/vnd.ms-excel |
| .xla | アプリケーション/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xltx | application/vnd.openxmlformats-officedocument.spreadsheetml.template |
| .xlsm | application/vnd.ms-excel.sheet.macroEnabled.12 |
| .xltm | application/vnd.ms-excel.template.macroEnabled.12 |
| .xlam | application/vnd.ms-excel.addin.macroEnabled.12 |
| .xlsb | application/vnd.ms-excel.sheet.binary.macroEnabled.12 |
| .ppt | アプリケーション/vnd.ms-powerpoint |
| 。ポット | アプリケーション/vnd.ms-powerpoint |
| .pps | アプリケーション/vnd.ms-powerpoint |
| .ppa | アプリケーション/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .potx | application/vnd.openxmlformats-officedocument.presentationml.template |
| .ppsx | application/vnd.openxmlformats-officedocument.presentationml.slideshow |
| .ppam | application/vnd.ms-powerpoint.addin.macroEnabled.12 |
| .pptm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .potm | application/vnd.ms-powerpoint.presentation.macroEnabled.12 |
| .ppsm | application/vnd.ms-powerpoint.slideshow.macroEnabled.12 |
ファイルのアップロード (ant-design-vue に基づく)
ボタンをクリックしてファイルをアップロードし、ファイルのパスワードを伝えます。パスワードは空でも構いません。
テンプレートセクション:
<a-upload
name="file"
accept=".xls,.xlsx"
:file-list="fileList"
:showUploadList="true"
:withCredentials="true"
:headers="headers"
:before-upload="beforeUpload"
:disabled="loading"
:remove="handleRemove"
>
<a-button>
<SvgIcon name="upload" v-show="!loading" />
{
{ title }}
</a-button>
</a-upload>
実際には、これは手動アップロードです。antd ドキュメントに例があります: ant-design-vue アップロード コンポーネント。
簡単に説明すると、自動アップロードに基づいて 2 つのパラメーターを追加する必要があるということです。
| パラメータ | 説明する | |
|---|---|---|
| アップロード前 | ファイルをアップロードする前のフック。パラメータはアップロードされたファイルです。false が返された場合、アップロードは停止します。Promise オブジェクトを返すことをサポートしています。Promise オブジェクトが拒否するとアップロードが停止し、解決するとアップロードが開始されます (resolve が File または Blob オブジェクトに渡された場合、resolve がオブジェクトに渡されます)。注: IE9 はこの方法をサポートしていません。 | (ファイル、ファイルリスト) =>boolean |Promise |
| ファイルリスト | アップロードされたファイルのリスト (管理対象) | 物体[ ] |
ユーザーがアップロードしたファイルを、まだアップロードされていない beforeLoad に保存します。
// 上传前
const beforeUpload = (file: FileItem) => {
console.log(file, ' file ');
fileList.value = [file];
return false;
};
アップロードをクリックすると:
const loading = ref(false);
// 上传
const handleUpload = async () => {
if (!fileList.value.length) {
message.error('Please upload first');
return;
}
// 使用formData格式传递参数
const fd = new FormData();
fd.append('file', fileList.value[0]);
fd.append('pwd', pwd.value);
loading.value = true;
try {
// 发送请求
const res = await importCart(fd);
if (res.success) {
// success
} else {
// fail
} catch (err) {
console.log(err);
} finally {
loading.value = false;
}
};
以前に自動から手動に変更したとき、antd の content-type パラメータを模倣していましたが、それを削除した後、効果がないことがわかりました。
export const importCart = (params) =>
defHttp.post({
url: Api.api_import_cart,
params,
// 使用antd自动上传时的 response header
'Content-Type': 'application/octet-stream',
headers: {
ignoreCancelToken: true,
// 使用antd自动上传时的 request header
'Content-Type': 'multipart/form-data',
},
});
以上！