このプロジェクトで使用されているサードパーティのUIライブラリはantdesignで、写真のアップロード機能の実装にはuploadアップロードコンポーネントが利用されています。
記事の2番目の方法は、ajaxメソッドを使用してアップロードされています。では、axiosメソッドを使用する場合、どのようにアップロードするのでしょうか？落とし穴を踏んだ上で、まとめると以下のようになります：
1、複数のパラメータを指定してサーバーにアップロードする場合、FormDataのappendメソッドを使って他のパラメータを追加する必要があります。アップロード時に渡すことができるのは formData データのみです。
customRequest = (option) => {
const {appKey, categoryId } = this.requestPictureupload
//formDataフォームオブジェクトとしてアップロードする
let formData = new FormData();
formData.append("file", option.file);
formData.append("appKey", appKey);
formData.append("categoryId", categoryId);
//uploadPictureaxios用のラッピングメソッドで、フォームのパラメータはデータのみ。
uploadPicture(formData).then(ref => {
if (ref.data.errorMsg == "アップロードに成功する") {
// console.log(ref.data.data)
}
})
}
//リクエスト・インターセプターの設定
axios.interceptors.request.use(config => {
let csrfToken = localStorage.getItem("token");
config.headers["token"] = csrfToken;
if(config.url=="api/v1/picture/upload"){
//formDataとしてアップロードする場合は、リクエストヘッダのContent-Typeをmultipartに変更する。/form-dataということで、判定を追加してみた。
config.headers['Content-Type']="multipart/form-data";
}else{
config.headers['Content-Type'] = 'application/json';
}
return config;
export const uploadPicture=(formData)=>{
//url一時的にフロントエンドのプロキシをクロスドメインで使用する
return Http.post("api/v1/picture/upload",formData);}
FormData() から印刷されたデータを表示します。リンク
アップロード時のネットワーク内のデータ。
アクシオス・リクエスト・パラメータ設定リンク
Content-Typeの意味。リンク：
バックエンドサーバにjsをアップロードするには2つの方法があります。ひとつは FormData フォームでアップロードする方法、もうひとつは base64 データ形式でアップロードする方法です。アップロード方法は事前にバックエンドに確認する必要があります。
この記事もcustomRequestメソッドでアップされていて、なかなか良い感じです。リンク：
未完の仕事、継続中。
フロントエンドには各アップロードのステータスが表示されます；
写真のサイズ設定をアップロードします；
