A simple and easy-to-use mobile Vue.js file upload solution

With the popularity of mobile applications and websites, the file upload function has become more and more important. On the mobile side, we usually use Vue.js to develop front-end applications, so we need a file upload solution suitable for mobile Vue.js applications. The following will introduce a simple and easy-to-use mobile Vue.js file upload solution.

1. Select the file

The first step to upload the file is to select the file. We need to provide the user with a button to select a file and listen for click events on the button. For example:

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

In the above code, we provide the user with a button to select a file, set the reference name with the ref attribute, and listen for the selection in the handleFileChange method File changes. Once the file is selected, we can upload the file to the server.

2. Upload files

In Vue.js, we usually use axios to send HTTP requests. For file upload, we need to use the FormData object to handle the binary data. Therefore, we can use axios to send a file upload request in the uploadFile method. For example:

methods: {
  handleFileChange () {
    this.selectedFile = this.$refs.fileInput.files[0]
    console.log(this.selectedFile)
  },
  uploadFile () {
    let formData = new FormData()
    formData.append('file', this.selectedFile)
    axios.post('/api/upload', formData).then(res => {
      console.log(res.data)
    })
  }
}

In the above code, we store the selected file in the selectedFile variable. Then, we create a FormData object and add the file to it. Finally, we use axios to send a POST request to the server's /api/upload address to upload file data.

3. Real-time progress bar

When the file is large or the network is slow, the upload process may take some time. Therefore, we need to tell the user about the upload progress. We can use the built-in progress bar of axios to achieve this function. For example:

methods: {
  handleFileChange () {
    this.selectedFile = this.$refs.fileInput.files[0]
    console.log(this.selectedFile)
  },
  uploadFile () {
    let formData = new FormData()
    formData.append('file', this.selectedFile)
    axios.post('/api/upload', formData, {
      onUploadProgress: progressEvent => {
        this.uploadPercentage = Math.round((progressEvent.loaded / progressEvent.total) * 100)
      }
    }).then(res => {
      console.log(res.data)
    })
  }
}

In the above code, we use the onUploadProgress callback function to calculate the upload progress. We store the upload progress in the uploadPercentage variable and render the progress bar in the Vue.js component. For example:

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">上传文件</button>
    <div class="progress-bar">
      <div class="progress-bar-inner" :style="{ width: uploadPercentage + &#39;%&#39; }"></div>
    </div>
  </div>
</template>

<style>
.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
}

.progress-bar-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #49c9b6;
}
</style>

In the above code, we use CSS styles to render the progress bar, progress-bar is the outer container of the progress bar, progress-bar-inner is the actual progress of the progress bar.

4. Conclusion

The above is a simple and easy-to-use solution to implement file upload in mobile Vue.js application. By adding a progress bar, we can let users know the progress of file upload in real time. At the same time, we can also modify the code as needed to meet our specific needs. In short, this is a reliable and convenient Vue.js file upload solution.

The above is the detailed content of A simple and easy-to-use mobile Vue.js file upload solution. For more information, please follow other related articles on the PHP Chinese website!