Complete guide to implementing file upload in Vue (axios, element-ui)

In modern web applications, file upload has become a basic function. Whether uploading avatars, pictures, documents or videos, we need a reliable way to upload files from the user's computer to the server.

This article will provide you with a detailed guide on how to use Vue, axios and element-ui to implement file upload.

1. What is axios

axios is a promise-based HTTP client for browsers and node.js. It supports all modern browsers as well as IE8 and above. Moreover, axios elegantly handles many common XHR requests and many details of the API. We can easily implement our file upload functionality using axios.

2. Create a basic page and form with element-ui

First, let us create a basic page and form. We will use element-ui to build a simple form and collect user uploaded files.

<template>
  <div class="upload-form">
    <el-upload :action="serverUrl" :on-success="uploadSuccess" :headers="headers"
               :before-upload="beforeUpload" :on-error="uploadError">
      <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
      <div slot="tip" class="upload-tip">只能上傳jpg/png文件，且不超過2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('頭像上傳成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上傳頭像圖片失敗!')
    }
  }
}
</script>

<style scoped>
.upload-form {
  margin-top: 20px;
  text-align: center;
}
.upload-tip {
  margin-top: 10px;
  color: #999;
}
</style>

Here, we use the upload component of element-ui and define some upload-related settings and events. When the user selects the file and clicks the upload button, we will perform the following operations:

• Before uploading, we will check the type and file size of the image from the passed file object, if it does not meet the requirements Prevent uploading and display an error message to the user;
• When the upload is successful, we will output the response data and send a successful upload message to the user;
• When the upload fails, we will output error and send an error message to the user.

3. Vue component that implements file upload

Now that we have created a simple form to collect files uploaded by users, next we need to upload the files Upload to the server. We will use axios for this task.

<template>
  <!-- 這里插入上一部分的代碼 -->
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      serverUrl: '/api/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadSuccess (response) {
      console.log(response.data)
      this.$message.success('頭像上傳成功!')
    },
    uploadError (error) {
      console.log(error)
      this.$message.error('上傳頭像圖片失敗!')
    },
    uploadFile (file) {
      const formdata = new FormData()
      formdata.append('file', file)
      axios.post(this.serverUrl, formdata, {
        headers: this.headers
      }).then((response) => {
        this.uploadSuccess(response)
      }).catch((error) => {
        this.uploadError(error)
      })
    }
  }
}
</script>

<style scoped>
  <!-- 這里插入上一部分的代碼 -->
</style>

In the above code, we introduced axios, and then we defined the method uploadFile to upload files. In this method, we first create a FormData instance to send the file to the server along with the request. Next, we call the axios.post method to upload the file to the server. When the response is successful or failed, we will call the corresponding response function to send a success or error message to the user.

4. Using the File Upload Component in a Vue Application

Now that we have created a component with upload functionality, we integrate it into the Vue application.

<template>
  <div>
    <NavigationBar /> <!-- 插入導(dǎo)航欄組件代碼 -->
    <UploadForm /> <!-- 插入上傳表單組件代碼 -->
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'
import UploadForm from './components/UploadForm.vue'

export default {
  components: {
    NavigationBar,
    UploadForm
  }
}
</script>

Here we introduce the NavigationBar and UploadForm components and place them in the template of the main Vue component.

5. Backend Server

Finally, we need a backend server to accept the uploaded files and save them on the server. Below is a simple Express server example.

const express = require('express')
const bodyParser = require('body-parser')
const multer  = require('multer')
const app = express()

const upload = multer({ dest: 'uploads/' })

app.use(bodyParser.json())
app.use(bodyParser.urlencoded())

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.status(200).json({
    success: true,
    message: 'File uploaded successfully!'
  })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000')
})

In this Express server, we use multer middleware to parse the uploaded files and save them in the uploads folder. We then output the uploaded file information in the route handler and send a success response to the client. You can upload files according to your actual needs.

Summary

In this article, we explored how to use Vue, axios, and element-ui to create a web application with file upload functionality. We learned how to use the element-ui upload component to collect user uploaded files and use axios to upload the files to the server via HTTP. At the same time, we also learned how to create an Express server to accept and parse uploaded files.

This is a detailed, comprehensive guide to help you implement file upload functionality in your Vue application. If you have any questions or thoughts, please leave them in the comments!

The above is the detailed content of A complete guide to implementing file upload in Vue (axios, element-ui). For more information, please follow other related articles on the PHP Chinese website!