Vue 일괄 업로드를 위한 코드 작성 방법

최근 몇 년 동안 프런트엔드 프레임워크는 많은 프런트엔드 개발자가 선택하는 도구가 되었으며, 그중 vue.js는 쉬운 학습 곡선과 쉬운 유지 관리로 인해 개발자들이 선호합니다. vue.js에서 파일 업로드 기능 구현은 매우 일반적인 요구사항 중 하나이며, 다양한 웹사이트에서 일괄 업로드를 사용하고 있습니다. 그렇다면 vue.js에서 일괄 업로드를 구현하는 방법은 무엇입니까? 다음은 vue.js가 일괄 업로드를 구현하는 방법을 자세히 소개합니다.

1. 간단한 파일 업로드

일괄 업로드를 소개하기 전에 vue.js의 간단한 단일 파일 업로드 구현을 살펴보겠습니다. 업로드하려는 파일이 다음과 같다고 가정합니다.

<input type="file" @change="handleFileUpload"/>

파일 업로드를 처리하기 위해 vue.js의 메서드에 handlerFileUpload 함수를 추가합니다.

handleFileUpload() {
  const file = event.target.files[0]; //获取文件对象
  const formData = new FormData(); //建立FormData对象
  formData.append('file', file); //将文件添加到FormData中
  axios.post('/file/upload', formData)//使用axios发送post请求上传文件
       .then(response => {
        console.log(response);//上传成功后的响应结果
       })
}

이 코드에서는 axios 라이브러리를 사용하여 업로드할 게시물 요청을 보냅니다. 파일을 사용하지만 다른 라이브러리나 기본 Ajax도 구현할 수 있습니다. 물론 실제 프로젝트에서는 보안을 보장하기 위해 인증 토큰이나 CSRF 토큰을 사용해야 할 수도 있습니다.

2. 다중 파일 업로드

단일 파일 업로드를 이해한 후 다중 파일 업로드를 구현하는 vue.js의 방법을 소개하겠습니다. HTML에서 다중 선택 파일의 입력을 추가합니다:

<input type="file" ref="fileInput" @change="handleMultipleFileUpload" multiple>

그런 다음 메소드에 handlerMultipleFileUpload 함수를 추가합니다:

handleMultipleFileUpload() {
  const files = this.$refs.fileInput.files;//获取上传的文件对象
  const formData = new FormData();//建立FormData对象
  for(let i=0 ;i<files.length ;i++){
    formData.append('files', files[i]);//将文件添加到FormData对象中
  }
  axios.post('/file/multiple_upload', formData)//发送post请求上传多个文件
       .then(response => {
         console.log(response);//上传成功后的响应结果
       })
}

이 코드를 통해 단일 파일과 달리 여러 파일을 업로드할 수 있습니다. 순서. vue.js에서 여러 파일을 간단히 업로드하는 방법을 이미 이해하셨으리라 믿습니다.

3. 진행률 표시줄을 사용하여 다중 파일 업로드 구현

단, 위의 다중 파일 업로드 기능은 더욱 확장되어야 합니다. 예를 들어 업로드 진행률 표시줄을 표시하려면 업로드가 성공한 후에만 업로드 상태를 아는 대신 XMLHttpRequest 객체를 사용하여 업로드 진행률 표시줄을 구현해야 합니다. 코드는 다음과 같습니다.

handleMultipleFileUpload() {
    const files = this.$refs.fileInput.files;//获取上传的文件对象
    const formData = new FormData(); //建立FormData对象
    for(let i=0 ;i<files.length ;i++){
      formData.append('files', files[i]); //将文件添加到FormData对象中
    }
    const xhr = new XMLHttpRequest();//创建XMLHttpRequest对象实现进度条
    //upload.addEventListener用于上传进度监听
    xhr.upload.addEventListener("progress", function(evt){
      if(evt.lengthComputable){
        const percentComplete = Math.round(evt.loaded * 100 / evt.total);//计算上传进度
        console.log(`上传进度：${percentComplete}%`);
      }
    }, false);
    //ajax完成后触发的事件
    xhr.onreadystatechange=function(evt){
      if(xhr.readyState===4){//上传完成
        console.log(xhr.responseText);//上传完成后的响应结果
      }
    }
    //发送post请求上传文件
    xhr.open("POST", "/file/multiple_upload");
    xhr.send(formData);
  }

사실 스트리밍 미디어, 대용량 파일 등 특수 파일을 업로드할 경우 위의 업로드 방법이 제한될 수 있습니다. 따라서 업로드되는 파일의 유형, 파일 크기 제한, 네트워크 속도, 사용자 요구 사항 등을 이해하고 해당 업로드 방법을 선택하는 것이 매우 필요합니다.

요약하자면, 이 글에서는 vue.js를 사용하여 단일 파일 업로드와 다중 파일 업로드를 구현하는 방법을 소개하고, XMLHttpRequest 객체를 통해 업로드 진행률 표시줄의 효과를 구현합니다. 나는 이러한 방법이 파일 업로드 기능을 더 잘 완성하는 데 도움이 될 수 있다고 믿습니다. 동시에 실제 프로젝트에서는 백엔드 서버가 업로드된 파일을 처리하는 방법과 파일 유출 및 데이터 변조 및 기타 관련 문제를 방지하는 방법도 고려해야 합니다.

위 내용은 Vue 일괄 업로드를 위한 코드 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!