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

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">点击上传</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 /> <!-- 插入导航栏组件代码 -->
    <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!