1. 简单一点首页
  2. 编程

Vue上传全解析

UAJXK • • 编程

一、Vue上传文件

VUE是一个简约的面向数据的用户界面库，它也是一个非常好的前端框架，它提供了很多 UI 组件和插件来帮助我们快速开发应用程序。Vue上传文件主要使用 input 标签和file类型，需要注意的是，input 标签的 type属性必须是 “file”，而且必须要有 @change事件监听。

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

<script>
  export default {
    methods: {
      uploadFile(event) {
        const file = event.target.files[0];
        console.log(file);
      }
    }
  }
</script>

二、Vue上传本地文件存到缓存里

文件一般需要上传到服务器，为了减少上传时间，可以先将文件存到缓存里，在上传时再将缓存里的文件一并上传。在VUE中，可以使用 FileReader 对象将上传文件保存到浏览器缓存。

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

<script>
  export default {
    methods: {
      readFile(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const fileContent = reader.result;
          localStorage.setItem('fileName', fileContent);
        }
      }
    }
  }
</script>

三、Vue上传文件后展示

上传文件后，需要将文件展示出来。在VUE中，可以使用URL.createObjectURL()将文件转换成URL形式，然后将URL显示在页面上。

<template>
  <div>
    <input type="file" @change="showFile" />
    <img :src="fileUrl" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileUrl: ''
      }
    },
    methods: {
      showFile(event) {
        const file = event.target.files[0];
        const fileUrl = URL.createObjectURL(file);
        this.fileUrl = fileUrl;
      }
    }
  }
</script>

四、Vue上传固定格式文件

为了保证后端的正确解析，可能需要上传固定格式的文件。在VUE中，可以使用accept属性限制上传的文件类型。

<template>
  <div>
    <input type="file" accept=".txt" @change="uploadFile" />
  </div>
</template>

<script>
  export default {
    methods: {
      uploadFile(event) {
        const file = event.target.files[0];
        console.log(file);
      }
    }
  }
</script>

五、Vue上传头像

上传头像时，需要对上传图片进行裁剪和压缩。在VUE中，可以使用vue-cropper插件、vue-photo-preview插件或者原生canvas进行裁剪和压缩。下面是使用vue-cropper插件进行头像上传的示例代码。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :guides="false"
      :view-mode="2"
      :auto-crop-area="0.8"
      :background="false"
    />
    <button @click="uploadAvatar">上传头像</button>
  </div>
</template>

<script>
  import VueCropper from 'vue-cropperjs';
  import 'cropperjs/dist/cropper.css';

  export default {
    components: { VueCropper },
    methods: {
      uploadAvatar() {
        const cropper = this.$refs.cropper.$cropper;
        cropper.getCroppedCanvas().toBlob(blob => {
          console.log(blob);
        });
      }
    }
  }
</script>

六、Vue上传功能

很多应用都需要上传文件，比如上传图片、上传附件等。在VUE中，可以使用axios、fetch等网络请求库实现上传功能。下面是使用axios实现上传的示例代码。

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="handleSubmit">上传</button>
  </div>
</template>

<script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        file: null,
        formData: new FormData()
      }
    },
    methods: {
      uploadFile(event) {
        this.file = event.target.files[0];
        this.formData.append('file', this.file);
      },
      handleSubmit() {
        axios.post('/upload', this.formData)
          .then(response => {
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
</script>

七、Vue上传文件到后端

将文件上传到后端需要使用ajax或者form表单提交，一般使用ajax。在VUE中，可以使用axios、fetch等网络请求库实现上传文件到后端。下面是使用axios实现上传文件到后端的示例代码。

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="handleSubmit">上传</button>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        file: null,
        formData: new FormData()
      }
    },
    methods: {
      uploadFile(event) {
        this.file = event.target.files[0];
        this.formData.append('file', this.file);
      },
      handleSubmit() {
        axios.post('/upload', this.formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
      }
    }
  }
</script>

八、Vue上传图片

上传图片可以选择上传到服务器或者上传到第三方云存储。在VUE中，可以使用axios、fetch等网络请求库实现上传图片。下面是使用axios实现上传图片的示例代码。

<template>
  <div>
    <input type="file" accept="image/*" @change="uploadImg" />
    <button @click="handleSubmit">上传</button>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        img: null,
        formData: new FormData()
      }
    },
    methods: {
      uploadImg(event) {
        this.img = event.target.files[0];
        this.formData.append('img', this.img);
      },
      handleSubmit() {
        axios.post('/upload', this.formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
      }
    }
  }
</script>

九、Vue上传txt文件

上传txt文件时，需要对上传的文件进行处理（如编码转换等）。在VUE中，可以使用FileReader对象读取文件内容，并进行处理。下面是一个上传txt文件并读取文件内容的示例代码。

<template>
  <div>
    <input type="file" accept=".txt" @change="uploadTxt" />
    <button @click="handleSubmit">上传</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        txt: null,
        formData: new FormData()
      }
    },
    methods: {
      uploadTxt(event) {
        this.txt = event.target.files[0];
        const reader = new FileReader();
        reader.readAsText(this.txt);
        reader.onload = () => {
          this.formData.append('txt', reader.result);
        };
      },
      handleSubmit() {
        // 同八中的axios上传方式一致，这里不进行重复展示。
        console.log(this.formData);
      }
    }
  }
</script>

十、Vue上传文件进度条

对于大文件上传的操作，需要有进度条来提示用户上传的进度。在VUE中，可以使用axios的onUploadProgress事件实现上传进度条。下面是一个上传进度条的示例代码。

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="handleSubmit">上传</button>
    <div class="progress">
      <div class="progress-bar" :style="{ width: uploadProgress + '%'}">
        {{ uploadProgress }}%
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        file: null,
        formData: new FormData(),
        uploadProgress: 0
      }
    },
    methods: {
      uploadFile(event) {
        this.file = event.target.files[0];
        this.formData.append('file', this.file);
      },
      handleSubmit() {
        axios.post('/upload', this.formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: progressEvent => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          }
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

        this.uploadProgress = 0;
      }
    }
  }
</script>

原创文章，作者：UAJXK，如若转载，请注明出处：https://www.506064.com/n/368968.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
UAJXKUAJXK
0
上一篇 2025-04-12 13:00
下一篇 2025-04-12 13:00

相关推荐

  • 使用Vue实现前端AES加密并输出为十六进制的方法

    在前端开发中，数据传输的安全性问题十分重要，其中一种保护数据安全的方式是加密。本文将会介绍如何使用Vue框架实现前端AES加密并将加密结果输出为十六进制。 一、AES加密介绍 AE…

    编程 2025-04-29

  • Vue TS工程结构用法介绍

    在本篇文章中，我们将从多个方面对Vue TS工程结构进行详细的阐述，涵盖文件结构、路由配置、组件间通讯、状态管理等内容，并给出对应的代码示例。 一、文件结构 一个好的文件结构可以极…

    编程 2025-04-29

  • 百度网盘Python上传

    百度网盘是一个常用的云存储平台，提供了多种上传文件的方式，其中包括使用Python进行上传。本文将从安装Python、安装依赖库、上传文件三个方面进行详细阐述。 一、安装Pytho…

    编程 2025-04-28

  • 如何使用git拉出某个用户上传的文件？

    Git是一个非常流行的版本控制系统，它可以帮助团队协作，并保证代码的版本控制。有时候，我们需要拉出某个用户上传的文件，但不知道从哪里开始。本文将会从多个方面详细阐述如何使用git拉…

    编程 2025-04-28

  • 上传多媒体文件的常用方法——uploadmediabyurl

    uploadmediabyurl是一个非常常用的方法，它允许我们将本地的多媒体文件上传到微信服务器上。 一、uploadmediabyurl的基本使用方法 要使用uploadmed…

    编程 2025-04-27

  • Vue3的vue-resource使用教程

    本文将从以下几个方面详细阐述Vue3如何使用vue-resource。 一、安装Vue3和vue-resource 在使用vue-resource前，我们需要先安装Vue3和vue…

    编程 2025-04-27

  • NB设备上传数据方案

    NB（Narrow Band）是一种物联网通信技术，可以实现低功耗、宽覆盖、多连接等特点。本文旨在探讨如何使用NB设备上传数据。在这篇文章中，我们将介绍NB设备上传数据的基本原理、…

    编程 2025-04-27

  • Vue模拟按键按下

    本文将从以下几个方面对Vue模拟按键按下进行详细阐述： 一、Vue 模拟按键按下的场景 在前端开发中，我们常常需要模拟按键按下的场景，比如在表单中填写内容后，按下“回车键”提交表单…

    编程 2025-04-27

  • ThinkPHP6 + Vue.js: 不使用Fetch的数据请求方法

    本文将介绍如何在ThinkPHP6和Vue.js中进行数据请求，同时避免使用Fetch函数。 一、AJAX：XMLHttpRequest的基础使用 在进行数据请求时，最基础的方式就…

    编程 2025-04-27

  • 开发前端程序，Vue是否足够？

    Vue是一个轻量级，高效，渐进式的JavaScript框架，用于构建Web界面。开发人员可以使用Vue轻松完成前端编程，开发响应式应用程序。然而，当涉及到需要更大的生态系统，或利用…

    编程 2025-04-27

发表回复

登录后才能评论