フロントエンドはどのようにして写真をバックエンドのネイティブ JS に転送しますか (nodejs バックエンドの保存コードについては、私の他の記事を参照してください)

最近、ユーザーのアバターをアップロードする必要があるため、2 日間研究した後、バックエンド インターフェイスの書き方については、私の別の記事を参照してください。

バックエンド インターフェイスが作成されたので、フロントエンドは画像を書き込んで転送する必要があります。

私が直接使用しているネイティブ JS はコンポーネントを使用しません。最初に原理について話します。フロントエンドはファイル ストリームをバックエンドに直接転送しませんが、アドレスを提供し、ブラウザーがそれを渡すのを手伝ってくれます。アップロードされた写真は C:/faskpath/folder という名前の場所に保存されます

最初のHTML部分

<button @click="sumimg">提交图片</button>
<input type="file" id="ones"/>

たった 2 つの文で、1 つはファイルを選択し、1 つは送信するボタンです。入力に ID 値を指定することを忘れないでください。

次のjs書き込みボタンステートメント

async sumimg() {
       //拿到元素节点
      let ones=document.getElementById('ones')
      //读取到第一个照片图
      const file = ones.files[0]
        //声明一个对象，传递图片用
      let obj=new FormData()
        //追加到刚刚创建的对象里面
      obj.append('flies',file)
        //我这里axios封装了，你们也可以直接axios.post({})效果一样
      const { data: res } = await this.$http.post("uploadimg",obj
      );
    },

このように、写真がバックエンドに送信される限り、バックエンドは不規則な名前の列を受け取りますが、バックエンドは写真の名前を変更してバックエンドに保存します。写真の名前を渡す必要はありません。この画像の元の名前を持つファイルが必要です。