Vue实战:图片上传组件开发

图片上传是Web开发中常见的需求之一。下面我们介绍如何使用Vue框架开发一个简单的图片上传组件。

一、需求分析
我们的图片上传组件应具备如下功能:

  1. 用户能够选择一张图片进行上传;
  2. 点击上传按钮后,将选中的图片上传到服务器;
  3. 显示上传进度,并提供取消上传的功能;
  4. 上传完成后,显示上传成功的提示,并提供查看上传结果的链接。

二、项目搭建
首先,我们需要搭建一个基于Vue的项目。可以使用Vue CLI进行创建,具体步骤如下:

  1. 安装Vue CLI:在命令行中输入npm install -g @vue/cli
  2. 创建项目:在命令行中输入vue create image-upload,然后按照提示进行配置;
  3. 进入项目目录:在命令行中输入cd image-upload
  4. 启动项目:在命令行中输入npm run serve,项目将会运行在本地的开发服务器上。

三、开发图片上传组件

1,在src/components目录下创建一个名为ImageUpload.vue的文件,用于编写图片上传组件的代码。

<template><div><inputtype="file"@change="handleFileChange"/><button @click="upload">上传</button><div v-if="uploading"><div>{{ progress }}%</div><button @click="cancel">取消上传</button></div><div v-if="uploadSuccess">上传成功!<a :href="resultURL" target="_blank">查看结果</a></div></div>
</template><script>
export default {data() {return {file: null,uploading: false,progress: 0,uploadSuccess: false,resultURL: ''};},methods: {handleFileChange(event) {this.file = event.target.files[0];},upload() {this.uploading = true;// 假装上传,每秒增加10%的进度,共耗时10秒const timer = setInterval(() => {this.progress += 10;if (this.progress >= 100) {clearInterval(timer);this.uploading = false;this.uploadSuccess = true;this.resultURL = 'http://example.com/result';}}, 1000);},cancel() {this.uploading = false;this.progress = 0;this.uploadSuccess = false;}}
};
</script><style scoped>
/* 样式省略 */
</style>

2,在App.vue文件中使用刚刚编写的图片上传组件。

<template><div id="app"><ImageUpload /></div>
</template><script>
import ImageUpload from "./components/ImageUpload.vue";export default {name: "App",components: {ImageUpload}
};
</script><style>
/* 样式省略 */
</style>

 

四、测试与运行

  1. 在命令行中运行npm run serve,启动开发服务器;
  2. 打开浏览器,访问http://localhost:8080,即可看到上传组件的界面;
  3. 选择一张图片,点击上传按钮,可以看到上传进度以及上传成功的提示;
  4. 点击上传成功的提示中的链接,可以查看上传结果。

总结:
本文介绍了使用Vue框架开发图片上传组件的具体步骤,并提供了代码示例。在实际开发中,可以根据需求进行适当的修改和扩展,以满足项目的具体要求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/179714.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

好用的json处理工具He3 JSON

官网地址&#xff1a;https://he3app.com/zh/ json格式化 https://portal.he3app.com/home/extension/json-to-pretty 其他 https://portal.he3app.com/home/category

芯能科技-603105 三季报分析(20231123)

芯能科技-603105 基本情况 公司名称&#xff1a;浙江芯能光伏科技股份有限公司 A股简称&#xff1a;芯能科技 成立日期&#xff1a;2008-07-09 上市日期&#xff1a;2018-07-09 所属行业&#xff1a;电气机械和器材制造业 周期性&#xff1a;1 主营业务&#xff1a;分布式光伏解…

每日一练:简易计算器

1. 题目 设计实现一个简易的计算器&#xff0c;可以进行加减乘除的计算。可以考虑通过GUI和命令行输入等方式实现。 2. 设计思路 创建一个简单的用户界面&#xff0c;可以使用 Python 的 Tkinter模块。在界面上放置按钮&#xff0c;每个按钮代表一个数字、运算符或其他功能。…

家政预约服务管理系统,轻松搭建专属家政小程序

家政预约服务管理系统&#xff0c;轻松搭建专属家政小程序app&#xff1b; 家政服务app开发架构包括&#xff1a; 1. 后台管理端&#xff1a;全面管理家政服务、门店、员工、阿姨信息、订单及优惠促销等数据&#xff0c;并进行统计分析。 2. 门店端&#xff1a;助力各门店及员工…

Linux命令中的符号

目录 1 管道符 | 1.1 | grep [要检索的东西] 1.2 echo | tee 2 重定向 2.1 输出重定向覆盖 > 2.2 输出重定向添加 >> 2.3 文件输入重定向 < 2.4 多行文本输入重定向 << 2.5 常用搭配 2.5.1 终端不显示 > /dev/null 1 管道符 | 我们…

简单递归题

本来不想用递归做的&#xff0c;最后还是用了 题目如下&#xff1a; 洪尼玛有 n 块长度不同的木板&#xff0c;他想用这些木板拼成一个等边三角形的围栏&#xff0c;好将他的草泥马养在这个围栏里面。现在&#xff0c;给你这 n 块木板的长度&#xff0c;洪尼玛想知道他能否拼…

使用.NET8中的.http文件和终结点资源管理器

本文将以.NET8的模板增加的.http文件为引&#xff0c;介绍 Visual Studio 2022 中的 .http 文件编辑器&#xff0c;这是一个用于测试 ASP.NET Core 项目的强大工具。 文章目录 1. 背景2. HTTP 文件介绍2.1 简介2.2 .http 文件语法3. 在 Visual Studio 中使用3.1 终结点资源管理…

基于Spring原生框架构建原生Spring的第一个程序!

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…

04_Flutter自定义Slider滑块

04_Flutter自定义Slider滑块 一.Slider控件基本用法 Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[Text("sliderValue: ${_sliderValue.toInt()}"),Slider(value: _sliderValue,min: 0,max: 100,divisions: 10,thumbColor: Colors.…

在线yml和properties相互转换

目前搜索到的大部分代码都存在复杂结构解析丢失问题&#xff0c;所以自己写了一个&#xff0c;经过不充分测试&#xff0c;基本满足使用。 在线地址 除了yml和properties互转之外&#xff0c;还可以生成代码、sql转json等&#xff0c;可以去用一下&#xff0c;用爱发电&#x…

Nacos2.x配置中心源码分析

概述 源码注释参考 git 仓库&#xff0c;对应流程图后续补充&#xff1b; 启动 nacos nacos 启动类&#xff1a; // com.alibaba.nacos.NacosSpringBootApplication(scanBasePackages "com.alibaba.nacos") ServletComponentScan EnableScheduling public class…

查看正在运行的 Docker 服务命令

1.查看包括已停止的容器在内的所有容器 docker ps -a2.查看正在运行的 Docker 服务 docker service ls3.要卸载&#xff08;删除&#xff09;Docker 中的一个容器 bash以服务ztnci为例 docker rm 0939688452dc # 使用容器的 ID 替换这里的 ID如果你知道容器的名称&#xff…

MySQL事务(简单明了)

目录 1. 事务的特性&#xff08;ACID&#xff09;&#xff1a; 2. 事务的语法&#xff1a; 3. 隔离级别&#xff1a; 4. 保存点&#xff08;Savepoints&#xff09;&#xff1a; 5. 示例&#xff1a; 1. 事务的特性&#xff08;ACID&#xff09;&#xff1a; 原子性&#…

WebUI自动化学习(Selenium+Python+Pytest框架)003

1.元素操作 在成功定位到元素之后&#xff0c;我们需要对元素进行一些操作动作。常用的元素操作动作有&#xff1a; &#xff08;1&#xff09;send_keys() 键盘动作&#xff1a;向浏览器发送一个内容&#xff0c;通常用于输入框输入内容或向浏览器发送快捷键 &#xff08;2…

JAVA的反射机制

什么是反射机制 Java反射机制是指在运行时动态地获取类的信息并操作类的成员&#xff08;属性、方法、构造方法等&#xff09;的能力。通过反射&#xff0c;我们可以解析出类的完整信息&#xff0c;包括构造函数、成员变量、继承关系等。以下是一个使用反射机制创建对象、调用…

【数据结构】排序效率最优解之一:二叉树-堆

Hello everybody!今天打算给大家介绍一个功能比较强大的数据结构的基础&#xff0c;它不仅具有很高的应用价值而且排序效率很高。冒泡排序都知道叭&#xff0c;它的时间复杂度为O(n^2)&#xff0c;而堆排序的时间复杂度为O(n*logn)。堆排序直接碾压冒泡排序。在c语言阶段&#…

ES6之原始数据类型Symbol

ES6 引入了一种新的原始数据类型Symbol&#xff0c;表示独一无二的值。它属于 JavaScript 语言的原生数据类型之一&#xff0c;其他数据类型是&#xff1a;undefined、null、布尔值&#xff08;Boolean&#xff09;、字符串&#xff08;String&#xff09;、数值&#xff08;Nu…

ELK高级搜索,深度详解ElasticStack技术栈-上篇

前言 1、黑马视频地址&#xff1a;java中级教程-ELK高级搜索&#xff0c;深度详解ElasticStack技术栈 2、本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 1. 课程简介 1.1 课程内容 ELK是包含但不限于Elasticsearch&#xff08;简称es&#xff09;、Lo…

小狐狸ChatGPT付费创作系统V2.3.4独立版 +WEB端+ H5端最新去弹窗授权

ChatGPT付费创作系统V2.3.4版本优化了很多细节&#xff0c;如果使用着2.2.9版本建议没升级的必要。该版本为编译版无开源&#xff0c;2.3.X版本开始官方植入了更多的后门和更隐性的弹窗代码&#xff0c;后门及弹窗处理起来更麻烦。特别针对后台弹窗网址、暗链后门网址全部进行了…

Node.js 的适用场景

目录 前言 适用场景 1. 实时应用 用法 代码 理解 代码示例 理解 3. 微服务架构 用法 代码示例 理解 总结 前言 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它使得 JavaScript 可以脱离浏览器运行在服务器端。Node.js 的出现极大地扩展…