Axios를 사용하여 폼에서 파일을 게시하는 방법

Axios를 사용하여 폼에서 파일을 게시하는 방법

다음을 사용하여 플라스크 서버에 파일을 게시할 때 raw HTML을 사용하면 플라스크 요청에서 글로벌하게 파일에 액세스할 수 있습니다.

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

플라스크 내:

def post(self):
    if 'file' in request.files:
        ....

Axios에서도 같은 작업을 하려고 하면 플라스크 요청 global이 비어 있습니다.

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

위의 upload File 함수를 사용하지만 axios.post 메서드에서 헤더 json을 삭제하면 flask request 객체의 폼키에 있는 문자열 값 CSV 목록이 나타납니다(파일은 .csv).

파일 오브젝트를 악시스로 보내려면 어떻게 해야 하나요?

파일을 에 추가하다formData오브젝트를 설정하고Content-Type헤더를 로 향하다.multipart/form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Vue를 사용한 샘플 어플리케이션.요청을 처리하려면 localhost에서 실행되는 백엔드 서버가 필요합니다.

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

를 사용하지 않을 경우FormData오브젝트(예를 들어 API가 특정 콘텐츠 유형의 시그니처를 취득하고multipart/formdata그 중 하나가 아님) 대신 다음과 같이 할 수 있습니다.

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

이 정도면 되겠네요. 누군가에게 도움이 됐으면 좋겠어요.

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

React & HTML 입력으로 경험 공유

입력 필드 정의

<input type="file" onChange={onChange} accept ="image/*"/>

onChange 수신기 정의

const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

메모리 내의 객체(JSON 객체 등)를 사용하여 파일을 게시하는 방법:

import axios from 'axios';
import * as FormData  from 'form-data'

async function sendData(jsonData){
    // const payload = JSON.stringify({ hello: 'world'});
    const payload = JSON.stringify(jsonData);
    const bufferObject = Buffer.from(payload, 'utf-8');
    const file = new FormData();

    file.append('upload_file', bufferObject, "b.json");

    const response = await axios.post(
        lovelyURL,
        file,
        headers: file.getHeaders()
    ).toPromise();


    console.log(response?.data);
}

이게 내 방식이야

var formData = new FormData(formElement);
// formData.append("image", imgFile.files[0]);
const res = await axios.post(
  "link-handle",
  formData,
  {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }
);

이 에러는 컨트롤러의 실제 파라미터 이름입니다.알아내는 데 시간이 좀 걸렸는데, 아마 그게 누군가에게 도움이 될 거야.Next.js / .Net 6 사용

클라이언트:

export const test = async (event: any) => {
    const token = useAuthStore.getState().token;
    console.log(event + 'the event')
    if (token) {
        const formData = new FormData();
        formData.append("img", event);
        const res = await axios.post(baseUrl + '/products/uploadproductimage', formData, {
            headers: {
                'Authorization': `bearer ${token}`
            }
        })
        return res
    }
    return null
}

서버:

 [HttpPost("uploadproductimage")]
        public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)
        {
            return Ok();
        }

서버에서 "img:"가 아닌 "image" 매개 변수가 필요하기 때문에 오류가 발생했습니다.

formData.append("img", event);

 public async Task<ActionResult> UploadProductImage([FromForm] IFormFile image)

언급URL : https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios