Reactのウェブアプリで、ファイル変換APIを用いてaxiosでファイルを変換させたい。（axiosでの通信がうまくいかない）

Question

Reactのウェブアプリ上で、pptxをファイルをアップロードするとjpgやpngファイルに変換してウェブアプリ内で閲覧できるようにしたいのですが、まずAPIにファイルを送る時点でうまくいきません。（設定したerrorも返ってきます）エラーメッセージ自体は500で、そもそもAPIに正しくファイルを送れているのかも分かりません。
使っているAPIはこちらです。https://cloudconvert.com/api/v2#overview　v1を使っています。
axios.postの引数の取り方に問題があるのでしょうか。

const Upload = () => {
    const [file, setFile] = useState("");
    
    const saveFile = async(e) => {    
        setFile(e.target.files[0]);
        console.log("saveFile")
        console.log(file)
    };
    
    const uploadFile = async (e) => {
        const data = new FormData();
        data.append("file", file);
        const request = {
            "apikey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            "inputformat": "pptx",
            "outputformat": "jpg",
            "input": "raw",
            "file":data,
            "wait": true,
            "download": "inline"
        }
        axios.post('https://api.cloudconvert.com/v1/convert', request)
    .then(res => console.log(res))
    .catch(e => console.log("error"))
    };

Comments

[hoshi-takanori]

"input": "raw" というのはファイルの中身を文字列でそのまま渡せる場合で、バイナリファイルは base64 にすべきでは。また、This method is only recommend if the input files are relatively small とか書いてあるので、たぶんファイルサイズ制限があるかも。(v2 では 1MB とあるので、それに準ずる制限がありそう…。)
https://cloudconvert.com/api/v1/conversions#inputrawbase64
https://cloudconvert.com/api/v2/import#import-base64-tasks

Answer 1

axiosはパラメータの渡し方がpostとgetで異なります。

ブラウザの時にaxiosのPOSTの値が送信されない？そんなことはない

let params = new URLSearchParams();
params.append('プロパティ1', '値1');
params.append('プロパティ2', '値2');
params.append('プロパティ3', '値3');

axios.post(URL, params)
.then(;
//省略
)

これを逐一繰り返して、パラメータにメンバを持たせてください。自分も使ったことあるんですが、jQueryみたいにごそっとパラメータは送れなかったはずなので。

Comments

[AgeSasami]

ありがとうございます!
ご指摘いただいたところから下記の通りに直しましたところ、

const uploadFile = async (e) => {
const data = new FormData();
data.append("file", file);
console.log("uploadFile")
console.log(file,data)
let params = new URLSearchParams();
params.append("apikey","xxxxxxxxxxxxxxxx");
params.append("inputformat","pptx",);
params.append("outputformat","jpg");
params.append("input","raw");
params.append("file",data,);
params.append("wait",true,);
params.append("download","inline");
axios.post('https://api.cloudconvert.com/v1/convert', params)
.then(res => console.log(res))
.catch(e => console.log("error"))

試したところ、"error":"Please set the input filename, including input extension.","code":400というレスポンスが返り、 400Bad Requestエラー が出ました。いままで500エラーで、まったく理由も分からなかったのに比べて、非常に進歩しました。現在調べて直しておりますが、もしお知恵を貸していただけると大変嬉しく思います。

[AgeSasami]

post移行のURLがおかしくなっていますが、質問の文と同一のものです

[AgeSasami]

inputするファイル名を指定しなければいけない、という意味だったようです。指定したところ、{"error":"Conversion failed","code":422}のエラーが出ました。

Answer 2

postで渡すパラメータ自体を、requestではなくFormDataにして、
ファイル以外の他のパラメータを、data.append("file", file);のようにFormDataに追加してみてはどうでしょうか。