>웹 프론트엔드 >JS 튜토리얼 >vue+axios 형식으로 이미지를 업로드하는 단계에 대한 자세한 설명

vue+axios 형식으로 이미지를 업로드하는 단계에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-05-10 15:54:424435검색

이번에는 vue+axios 형식의 uploadingimages 단계에 대해 자세히 설명하겠습니다. vue+axios 형식으로 이미지를 업로드할 때의 주의사항은 무엇인가요? 바라보다.

그러면 문제는 이미지가 없을 때 요소의 업로드 컨트롤이 제출을 트리거하지 않는다는 것입니다. 그러나 인터페이스는 파일 다중 부분/양식 데이터 수신 모드로 작성되었습니다.

그래서 저는 혼자서 양식을 모방할 수밖에 없습니다. Upload

<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); 
   })

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!

추천 자료:

vue에서 axios를 사용하는 단계에 대한 자세한 설명

axios+post 양식 데이터 세부 정보 제출 방법

npm에 설치할 때 권한 문제를 처리하는 방법

위 내용은 vue+axios 형식으로 이미지를 업로드하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.