How to implement the file upload function in vue (two options)

Vue is a very popular front-end development framework that provides many rich components and tools to accelerate the development of web applications. In actual development, we often need to use Vue to implement the function of uploading files. In this article, we will introduce Vue’s solution for uploading files.

Option 1: Use third-party components

Vue has many third-party components that can be used to upload files, such as vue-dropzone, vue-file-upload , vue-upload-component, etc. These components provide rich APIs and styles to facilitate file uploading. The following example takes vue-upload-component as an example:

Install component

npm install vue-upload-component --save

Use

<template>
  <div>
    <file-upload
      ref="upload"
      :extensions="[&#39;jpg&#39;, &#39;png&#39;, &#39;gif&#39;]"
      :headers="headers"
      :url="url"
      @input="onInputChange"
      @start="onUploadStart"
      @end="onUploadEnd"
      @before="onBeforeUpload"
      @success="onUploadSuccess"
      @error="onUploadError"
    >
      <template slot="before">选择文件</template>
      <template slot="drag">将文件拖拽到此区域上传</template>
    </file-upload>
  </div>
</template>

<script>
import FileUpload from "vue-upload-component";

export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + token, // 根据实际情况设置token
      },
      url: "https://xxxx/upload", // 上传地址
    };
  },
  methods: {
    onUploadSuccess(response, file) {
      console.log(response, file);
    },
    onUploadError(err, response, file) {
      console.log(err, response, file);
    },
    onBeforeUpload(file) {
      console.log(file);
    },
    onUploadStart(file) {
      console.log(file);
    },
    onUploadEnd(file) {
      console.log(file);
    },
    onInputChange(file) {
      console.log(file);
    },
  },
};
</script>

in the component in data() In we can set the uploaded headers and url. The component also provides many hook functions that we can call according to actual needs. The instance of the component can be obtained through the ref attribute to call the component's method, for example:

this.$refs.upload.active = true; // 开始上传

Option 2: Use axios to send the request

In addition to using third-party components In addition to file upload, we can also use axios to send requests to upload files. The following code example shows how to upload files using axios:

Install axios

npm install axios --save

Code implementation

<template>
   <div>
      <input type="file" @change="onFileChange" />
   </div>
</template>

<script>
import axios from 'axios';

export default {
   methods: {
      onFileChange(event) {
         const url = 'https://xxxx/upload';
         const file = event.target.files[0];
         const formData = new FormData();
         formData.append('file', file);
         axios.post(url, formData, {
            headers: {
               Authorization: "Bearer " + token, // 根据实际情况设置token
            }
         })
         .then(res => {
            console.log(res.data);
         })
         .catch(err => {
            console.log(err);
         })
      }
   }
}
</script>

By obtaining the input type="file" element value, then create a FormData object and add the file object to the FormData. Finally, we use axios to send a POST request to upload the file and add the Authorization attribute in the request header for authentication.

Summary

Vue provides many convenient components and tools to complete the file upload function. We can quickly implement this with the help of third-party components, or we can use axios to send requests to upload files. To ensure security, we may need to add authentication to the interface for uploading files. Thank you for reading this article.

The above is the detailed content of How to implement the file upload function in vue (two options). For more information, please follow other related articles on the PHP Chinese website!