目次
概要
ファイルのアップロードとダウンロードの機能は、プロジェクト開発プロセスにおいて比較的一般的なビジネス要件です。クライアントに表示される視覚効果は次のとおりです。フロントのプロンプトの下で、ブラウザの特定の場所にローカル ファイルを追加します。デバイスはこの画像を直接エコーし、具体的な効果は次のとおりです。
ただし、この視覚効果の下でのファイルのアップロードは、単一のファイルのアップロード プロセスではありません。これは、ファイルのアップロードとダウンロードの 2 つの部分で構成されます。つまり、ファイルはクライアントからサーバーにローカルにアップロードされ、サーバーはファイルをエコーします。ブラウザで（サーバーにダウンロード）、次に 2 つのプロセスを詳しく紹介します。
ファイルのアップロード
導入
ファイル アップロード (アップロードとも呼ばれます) は、ローカルの写真、ビデオ、オーディオ、その他のファイルをサーバーにアップロードするプロセスを指し、他のユーザーが閲覧したりダウンロードしたりできます。ファイル アップロードはプロジェクトで広く使用されています。私たちはよく Weibo を送信します。 post Wechat Moments はすべてファイルアップロード機能を使用します。
ファイルアップロードのフロントエンド要件
ただし、実際の開発プロセスでは、フロントエンドページのこの部分のデザインはコンポーネントでパッケージ化されることが多く、例えばアップロードコンポーネントページのデザインを機能実現の完了に応じて最適化するためにelement-uiが使用されます。(最下層は引き続き投稿フォームを使用してリクエストを送信します)
次のように：
ファイルアップロード用のフロントエンドコード
アップロード機能を実装する要素 ui のコードは次のとおりです。
<div class="addBrand-container" id="food-add-app">
<div class="container">
<el-upload class="avatar-uploader"
action="/common/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload"
ref="upload">
<img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>ファイルアップロードのバックエンド要件
クライアント ページによってアップロードされたファイルを受信するために、サーバーは通常、Apache の 2 つのコンポーネントを使用します。
- コモンズファイルのアップロード
- コモンズアイオ
Spring フレームワークは、ファイルのアップロードを spring-web パッケージにカプセル化し、サーバー コードを大幅に簡素化します。アップロードされたファイルを受け取るには、Controller メソッドで MultipartFile 型のパラメーターを宣言するだけで済みます。次に例を示します。
ファイル アップロードのバックエンド実装ロジックに関して、一般的な実装アイデアは次のとおりです。
1. まず、MultipartFile クラスの仮パラメータを使用して、クライアントからファイルを受け取ります。注意する必要があります: MultipartFile クラス オブジェクトは、ファイルを受け取った後、ファイルを一時的に保存し、一時ファイルを生成します。送信処理後、ファイルがダンプされるかどうかに関係なく、この一時ファイルは消えます。
2. したがって、次のステップはこの一時ファイルを転送することです。ファイル転送プロセスにはファイル名の問題が必然的に含まれるためです。元のファイルのファイル名を使用すると、ファイル名が重複する問題が発生する可能性があります。元のファイルに基づいて新しいランダムなファイル名を生成し、新しいファイル名でダンプします。
2. 最後に、新しく生成されたファイル名を返すことを忘れないでください。アップロードはファイルをサーバーにアップロードするだけで、後でブラウザ上でファイルをエコーする作業が含まれるためです。これを使用する必要があります。
ファイル アップロードのバックエンド コード実装を示します。
ファイルアップロード用のバックエンドコード
@Value アノテーションを使用して、構成ファイルからファイル保存パスを読み取ります。
@Value("${reggie.path}")
private String path;reggie:
path: D:\img\ @PostMapping("/upload")
public R<String>upload(MultipartFile file){
log.info(file.toString());
//获取原始文件名，提取JPG
String originalFilename = file.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//生成随机文件名
String random=UUID.randomUUID().toString();
//获取新名称
String fileName=random+suffix;
//创建新名称
File file1 = new File(path);
if(!file1.exists()){
file1.mkdirs();
}
//进行转存
try {
log.info("文件路径为"+path+fileName);
file.transferTo(new File(path+fileName));
} catch (IOException e) {
throw new RuntimeException(e);
}
return R.success(fileName);
}注: MultipartFile クラスのオブジェクト名について: このオブジェクト名は、フロント エンドから送信されるオブジェクト名と一致している必要があります。つまり、フロント エンドとバック エンド間の対話がオブジェクト名によって一致している必要があります。名前が矛盾している場合、バックエンドに渡される MultipartFile ファイル オブジェクトは空のオブジェクトです。具体的なデモは次のとおりです。
ドキュメントをダウンロード
導入
ファイルのダウンロード (ダウンロードとも呼ばれます) は、サーバーからローカル コンピューターにファイルを転送するプロセスを指します。
通常、ブラウザを介したファイルのダウンロードには次の 2 つの形式があります。
- 添付ファイルとしてダウンロードし、保存ダイアログ ボックスをポップアップ表示して、指定したディスク ディレクトリにファイルを保存します。
- ブラウザで直接開く
ブラウザーを介したファイルのダウンロードは、基本的にサーバーがストリームの形式でファイルをブラウザーに関連付けるプロセスです。
フロントエンドの要件
フル画像エコー機能を実現するには、ダウンロードする前にアップロード機能を完了し、エコーするファイルのファイル名を取得する必要があるため、フロントエンドの要件は、 に従って新しいリクエストをサーバーに送信することです。アップロード応答によって返されるファイル名 写真情報をエコーするためのファイル情報、コード例と具体的なリクエスト URL は次のとおりです
コード例:
URL 表示: ダウンロード URL に特定の画像のファイル名が含まれていることがわかります。
フロントエンドコード
具体的なフロントエンド コードは次のとおりです。
methods: {
handleAvatarSuccess (response, file, fileList) {
this.imageUrl = `/common/download?name=${response.data}`
},
beforeUpload (file) {
if(file){
const suffix = file.name.split('.')[1]
const size = file.size / 1024 / 1024 < 2
if(['png','jpeg','jpg'].indexOf(suffix) < 0){
this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
this.$refs.upload.clearFiles()
return false
}
if(!size){
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
return file
}
}
}バックエンドの要件
バックエンドはフロントエンドからファイル名を受け取り、ファイルパスとファイル名に従って FileInputStream オブジェクトを作成し、応答オブジェクトを使用して ServletOutputStream オブジェクトを作成し、FileInputStream ファイルからデータを読み取り、配列を作成し、最後にストリーム リソースを閉じることを忘れないでください。
バックエンドコード
バックエンドのコードは次のとおりです。
@GetMapping("/download")
public void downLoad(String name, HttpServletResponse response){
//输入流，通过提供指定位置去读取数据
try {
FileInputStream fileInputStream = new FileInputStream(new File(path + name));
//输出流，通过读取到的数据输出到浏览器中
ServletOutputStream outputStream = response.getOutputStream();
response.setContentType("image/jpeg");
//将数据通过byte字符数组进行读取
int len=0;
byte[]bytes=new byte[1024];
while((len=fileInputStream.read(bytes))!=-1){
outputStream.write(bytes,0,len);
//刷新
outputStream.flush();
}
fileInputStream.close();
outputStream.close();
} catch (FileNotFoundException e) {
throw new RuntimeException(e);
} catch (IOException e) {
throw new RuntimeException(e);
}
}