Vue.js 中如何实现图片上传功能的完整实例

Vue.js 中如何实现图片上传功能的完整实例

图片上传是前端开发中非常常见的功能之一，我们经常需要在页面上上传用户的头像、商品图片等等。在 Vue.js 中，有很多现成的第三方库可以直接使用，比如 vue-upload-component、vue-simple-uploader 等。不过，本文将从原生的角度为大家介绍 Vue.js 中如何实现图片上传的完整实例。

  1. 使用 input[type="file"] 元素进行上传

在 Web 开发中，input[type="file"] 元素可以实现文件上传功能，我们可以通过 @change 监听其值变化事件，获取上传的文件对象。样例代码如下：

----------
  -----
    ------ ----------- ------------------------------- --
    ------- -------------------------------------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- -----
    --
  --
  -------- -
    ---------------------------- -
      --------- - ----------------------
    --
    ------------------ -
      ----- -------- - --- -----------
      ----------------------- -----------
      -- ------
    --
  --
--
---------

上述代码中，我们监听了 input[type="file"] 元素的值变化事件，将选择的文件对象保存在组件数据的 file 属性中。点击上传按钮时，我们构造一个 FormData 对象，将 file 属性作为参数传递进去，然后使用相关的请求库发起上传请求即可。

  1. 对上传图片进行预览

在处理图片上传时，通常需要对上传的图片进行预览，以便用户确认上传的图片是否正确。在 Vue.js 中，可以通过使用 URL.createObjectURL() 方法生成图片预览地址，再将其赋值给 img 标签的 src 属性。样例代码如下：

----------
  -----
    ------ ----------- ------------------------------- --
    ---- ----------------- ----------------- --
    ------- -------------------------------------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- -----
      ----------- -----
    --
  --
  -------- -
    ---------------------------- -
      ----- ---- - ----------------------
      --------- - -----
      -- --------
      --------------- - --------------------------
    --
    ------------------ -
      ----- -------- - --- -----------
      ----------------------- -----------
      -- ------
    --
  --
  ----------- -
    -- ------
    -- ----------------- -
      -------------------------------------
    -
  --
--
---------

上述代码中，我们在 handleFileInputChange 方法中使用 URL.createObjectURL() 方法生成图片预览地址，并将其保存在组件数据的 previewUrl 属性中。在模板中，我们使用 v-if 判断 previewUrl 属性是否存在，如果存在就显示图片预览。

需要注意的是，由于是通过 URL.createObjectURL() 方法生成的地址，因此在销毁组件时需要使用 URL.revokeObjectURL() 方法将其销毁，以释放浏览器内存。

  1. 图片上传进度条提示

在上传大文件时，用户体验常常是一个非常重要的问题，我们需要给用户实时反馈上传进度信息。在原生的 XMLHttpRequest 对象中，我们可以监听 upload 事件，获得上传进度信息。使用 XMLHttpRequest.upload.addEventListener 添加一个 progress 事件监听器，可以在上传过程中获取上传进度信息。样例代码如下：

----------
  -----
    ------ ----------- ------------------------------- --
    ---- ----------------- ----------------- --
    ------- -------------------------------------
    ---- -----------------
      ------- -------------- ---
    ------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- -----
      ----------- -----
      ---------- ------
      --------------- --
    --
  --
  -------- -
    ---------------------------- -
      ----- ---- - ----------------------
      --------- - -----
      -- --------
      --------------- - --------------------------
    --
    ------------------ -
      -------------- - -----
      ----- -------- - --- -----------
      ----------------------- -----------
      ----- --- - --- -----------------
      -- -----------
      --------------------------------------- ------- -- -
        -- ------------------------ -
          ------------------- - ------------------------ - ------------ - -----
        -
      ---
      ---------------- --------------
      ------------------------------------ -----------------------
      ---------------------- - -- -- -
        -- --------------- --- - -- ---------- --- ---- -
          ------------------------------
        -
      --
      -------------------
    --
  --
  ----------- -
    -- ------
    -- ----------------- -
      -------------------------------------
    -
  --
--
---------

在上述代码中，我们使用类似上文中的方式发起上传请求，不过我们添加了 XMLHttpRequest.upload.addEventListener 方法，在 progress 事件触发时更新 uploadProgress 属性，在模板中显示上传进度信息。需要注意的是，只有在 event.lengthComputable 为 true 时才能计算上传进度。

  1. 使用 Axios 进行图片上传

在实际的开发中，我们通常会选择使用第三方库 Axios 发起请求，以便处理更多的请求场景。Axios 是一个非常流行的 HTTP 请求库，它支持 Promise API、取消请求、拦截请求和响应、转换请求和响应数据等特性，非常适合用于处理请求。

上传图片时，我们可以通过构造一个 FormData 对象，并将具体的表单数据附加上去，然后使用 axios.post 方法发起请求。上传进度的处理与上文类似，不过我们可以直接使用 Axios 的 onUploadProgress 配置，省去了手动监听的代码。完整代码如下：

----------
  -----
    ------ ----------- ------------------------------- --
    ---- ----------------- ----------------- --
    ------- -------------------------------------
    ---- -----------------
      ------- -------------- ---
    ------
  ------
-----------

--------
------ ----- ---- --------

------ ------- -
  ------ -
    ------ -
      ----- -----
      ----------- -----
      ---------- ------
      --------------- --
    --
  --
  -------- -
    ---------------------------- -
      ----- ---- - ----------------------
      --------- - -----
      -- --------
      --------------- - --------------------------
    --
    ------------------ -
      -------------- - -----
      ----- -------- - --- -----------
      ----------------------- -----------
      -- ----
      ------------------------ --------- -
        -------- - --------------- --------------------- --
        ----------------- --------------- -- -
          -- -------------------------------- -
            ------------------- - -------------------------------- - -------------------- - -----
          -
        --
      ------------------ -- -
        ---------------------------
      ---------------- -- -
        ---------------------
      ------------- -- -
        -------------- - ------
      ---
    --
  --
  ----------- -
    -- ------
    -- ----------------- -
      -------------------------------------
    -
  --
--
---------
  1. 总结

图片上传是一个非常常见的需求，本文为大家介绍了 Vue.js 中如何通过原生的 XMLHttpRequest 对象和 Axios 发起图片上传请求，并对上传进度进行了简单的处理。希望对大家有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64929caa48841e98940667ef

阅读全文

猜你喜欢

  • ES12 提供的 WeakRefs 解决垃圾回收问题

    背景 在开发中，我们经常会使用到一些对象或者数据，而这些对象或者数据不能无限制的占用内存空间。因此，垃圾回收成为了我们要关注的重点。在 JavaScript 背后的引擎中，内存管理方式都有自己的一套规...

    1 年前
  • Enzyme 测试库的使用和优化

    Enzyme 测试库的使用和优化 Enzyme 是一个 React 的测试库，其目的是使 React 组件测试更加简单，直观和可交互，它基于 React 的 react-dom 渲染器进行开发。

    1 年前
  • ES8 中的异步函数如何解决 AJAX 请求问题

    JavaScript 中的异步函数在处理 AJAX 请求等需要等待响应的操作时非常有用。在 ES8 中，有一个新的异步函数语法——async/await，它有助于开发者更简单地处理异步逻辑，使得代码更...

    1 年前
  • Serverless 架构设计思路与细节分析

    什么是 Serverless？ Serverless 是一种计算模型，指的是将后端的代码部署到云函数，而不是传统的虚拟机或者物理服务器上。这种方式可以大幅度降低开发人员的运维成本，同时提高了应用的可伸...

    1 年前
  • 解决 Webpack 打包中 Uncaught TypeError 问题

    在前端开发中，使用 Webpack 进行打包是非常常见的操作。由于 Webpack 的灵活性和配置扩展能力，我们可以很容易地调整和优化代码打包的过程。然而，在实际的开发过程中，我们有时会遇到一些意外的...

    1 年前
  • 解决 CSS Flexbox 布局中 flex 子元素换行后对齐方式失效的问题

    在前端开发中，使用 CSS Flexbox 布局已经成为常见的布局方式。尤其是在移动端设备上，灵活的弹性布局可以适应不同屏幕尺寸的设备。但是在使用 Flexbox 布局时，我们可能会遇到一个问题：当 ...

    1 年前
  • Next.js 中路由的使用及参数传递

    Next.js 是一款针对 React 应用进行服务端渲染和静态网站生成的框架，它提供了一种简单易用的路由系统，方便开发者对应用进行路由控制。本文将介绍 Next.js 中路由的基本使用和参数传递，让...

    1 年前
  • Babel 在编译 Class 时的问题及解决方法

    作为一项底层技术，Babel 为前端开发者提供了强大的能力，让我们能够在项目中使用最新的 JavaScript 语言特性，而不用为了保证代码在浏览器中正常工作而妥协。

    1 年前
  • Vue.js 中实现无限滚动加载数据的方法

    当我们需要在前端页面上展示大量数据时，一次性加载所有数据可能会导致页面卡顿，甚至崩溃。这时候，无限滚动加载数据的方式会逐渐成为常见的解决方法。Vue.js 提供了一些方便的工具和技术来实现这种效果。

    1 年前
  • Jest + React + Enzyme 最佳实践分享

    在前端开发中，测试是非常重要的一部分。Jest、React、Enzyme 是三个在前端测试中非常流行的工具。Jest 是 Facebook 开源的一个 JavaScript 测试框架，React 是 ...

    1 年前
  • ES11 中的 String.prototype.replaceAll 方法解决 JavaScript 中字符串匹配问题

    随着前端应用的不断发展，字符串匹配成为开发中常常遇到的问题。在 JavaScript 中，字符串匹配早已经有了相应的方法，例如 String.prototype.split、String.protot...

    1 年前
  • Tailwind CSS 中的边距问题及解决方法

    Tailwind CSS 是一款流行的 CSS 框架，它以 CSS 类作为组件样式的基础，可以让开发者快速构建现代化的界面。然而，在实际应用中，使用 Tailwind CSS 经常会遇到边距相关的问题...

    1 年前
  • ES7 中新增的函数参数默认值详解

    ES7 中新增的函数参数默认值是一项非常强大的特性，可以方便地为函数参数设置默认值。这对于前端开发者来说非常有用，因为他们经常需要编写大量较复杂的代码，并且需要使用多个参数的功能。

    1 年前
  • 如何在 Web Components 中使用 AJAX 请求？

    Web 组件是一种可重用的 Web 界面元素，在前端开发中越来越受欢迎。与 React、Vue 等框架相比，Web 组件更具有独立性和灵活性。然而，在 Web 组件中使用 AJAX 请求是一项需要特别...

    1 年前
  • RxJS 6 中的 Pipeable 操作符

    RxJS 是一个功能强大的响应式编程库，它可以让开发者更轻松地构建复杂的异步应用程序。RxJS 6 引入了 Pipeable 操作符，它可以让代码更加模块化、可读性更好，并且更易于维护。

    1 年前
  • 使用 Mongoose 实现 MongoDB 数据的备份和恢复

    使用 Mongoose 实现 MongoDB 数据的备份和恢复 MongoDB 是目前非常流行的 NoSQL 数据库，其使用方便，操作简单。在开发过程中，MongoDB 数据的备份和恢复非常重要，因为...

    1 年前
  • 常见的 Node RESTful API 设计误区与优化方法

    RESTful API 是一种广泛应用于 Web 开发和移动应用开发的基于 HTTP 协议的 API 设计规范。在 Node 应用中使用 RESTful API 设计，可以方便实现数据的增删改查等操作...

    1 年前
  • Sequelize 线程池配置指南

    Sequelize 是一个很受欢迎的 Node.js ORM 库，它支持多种数据库，包括 MySQL、PostgreSQL、SQLite、MSSQL 等等。在使用 Sequelize 进行数据库操作时...

    1 年前
  • ES6 中 try-catch 语句有了变化，你知道吗？

    前端开发中使用 try-catch 语句是很常见的，它可以用来捕获代码中的异常情况，让代码更加健壮。在 ECMAScript 6（以下简称 ES6）中，try-catch 语句有了一些变化，本文将详细...

    1 年前
  • 解决 Angular 4 中的 “Can't bind to 'ngModel' since it isn't a known property” 问题

    在 Angular 4 开发过程中，经常会遇到这样的错误提示：“Can't bind to 'ngModel' since it isn't a known property”。

    1 年前

相关推荐

    暂无文章