vue如何实现上传文件功能（两种方案）-前端问答-PHP中文网

vue如何实现上传文件功能（两种方案）

PHPz

发布： 2023-04-13 10:46:41

原创

8386人浏览过

vue是一种非常流行的前端开发框架，它提供了很多丰富的组件和工具来加速web应用程序的开发。在实际开发中，我们经常需要使用vue来实现上传文件的功能。在这篇文章中，我们将介绍vue上传文件的方案。

方案一：使用第三方组件

Vue有很多第三方组件可以用来上传文件，像vue-dropzone、vue-file-upload、vue-upload-component等。这些组件都提供了丰富的API和样式来方便我们实现文件上传。以下示例以vue-upload-component为例：

安装组件

npm install vue-upload-component --save

登录后复制

在组件中使用

<template>
  <div>
    <file-upload
      ref="upload"
      :extensions="['jpg', 'png', 'gif']"
      :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>

登录后复制

在data()中我们可以设置上传的headers和url。组件还提供的很多钩子函数，我们可以根据实际需求来调用。通过ref属性可以获取到组件的实例，从而调用组件的方法，例如：

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

登录后复制

方案二：使用axios发送请求

除了使用第三方组件进行文件上传外，我们同样可以使用axios来发送上传文件的请求。以下代码示例展示了如何利用axios上传文件：

安装axios

npm install axios --save

登录后复制

代码实现

<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>

登录后复制

通过获取input type="file"元素的值，然后创建一个FormData对象，将文件对象添加到FormData中。最后，我们使用axios发送POST请求来上传文件，并在请求头中添加Authorization属性，用于进行身份验证。