vue axios 양식 제출을 통해 이미지를 업로드하는 예

아래에서는 vue axios 양식을 통해 이미지를 업로드하는 예를 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

요소 프레임워크가 프로젝트에 사용되고 프로젝트에 데이터를 추가해야 한다는 요구 사항이 있는데, 이를 위해서는 이미지 업로드 여부가 필요합니다.

그런 다음 문제는 요소의 업로드 컨트롤이 다음과 같은 경우 제출을 트리거하지 않는다는 것입니다. 이미지는 없지만 파일 멀티파트/폼 데이터 수신 모드로 인터페이스가 작성되어 있어서

폼을 따라해서 직접 업로드할 수 밖에 없습니다

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

let file = e.target.files[0];    
   let param = new FormData(); //创建form对象 
   param.append('file',file,file.name);//通过append向form对象添加数据 
   param.append('chunk','0');//添加form表单中其他数据 
   
   let config = { 
   headers:{'Content-Type':'multipart/form-data'} 
   }; //添加请求头 
   this.axios.post('http://upload.qiniu.com/',param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })

위는 모든 사람을 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

txt 파일의 업로드 미리보기 기능을 구현하는 JavaScript 코드

Angular는 작업 이벤트 명령 ng-click을 사용하여 여러 매개변수를 전달합니다. 예

Angular는 대문자/소문자 필터를 사용합니다. 글자크기 구현하기 변환 함수 쓰기 예시

위 내용은 vue axios 양식 제출을 통해 이미지를 업로드하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!