.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload

介绍

vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。


9a07be3a4fc6a92482e40307077b82b1.png

Github

https://github.com/Vanthink-UED/vue-core-image-upload

安装

npm install vue-core-image-upload --save

安装完成后,编辑源码

基本属性

Vue-core-image-upload 提供了很多可配置的选项,从而希望尽可能的满足开发者的需求。

4e863bc884bad0b11b0fa9f636be4f0e.png

响应事件

我们在上传的不同阶段指定了不同的派发事件,你可以绑定每个事件的响应方法,实现对于流程的控制。

  • imageuploaded

当图片上传完,会调用该事件绑定的函数,并且用户可以获取到服务端返回的数据。

  • imagechanged

当input框改变选择图片时候触发,会返回input的获取的图片数据

  • imageuploading

当图片上传过程中触发,你可以自定义你需要处理的内容比如显示加载动画等。

  • errorhandle

当图片上传发生错误的时候触发,会返回错误状态信息

methods: {    imagechanged() {      this.step += 1;    },    imageuploading() {      this.step += 1;    },    imageuploaded(res) {      this.step += 1;      this.src = res.data.src;    }  }

自定义组件样式

你可以设置组件的class 以及自己编写子组件的形式来控制组件的显示的样子。

1fbdfd84253fcbd53e9f30ecd16bc44a.png

裁剪图片

你可以通过设置 crop,来实现图片的裁剪。你可以指定图片裁剪的宽高,以及它的最大宽度和高度这些参数。

设置 cropRatio来限制裁剪图片的形状,需要字符串的格式(1:1 或者2:3这种比例形式),当然你可以设置为 auto 则不限制裁剪框的形状。

设置图片裁剪后,批量上传将不再生效。

图片裁剪完有两种选择,选择本地裁剪local或者服务端裁剪 server

  • 本地裁剪

你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。

68abc569c3645903dda9b1f88c01a7e3.png
  • 服务端裁剪

服务端裁剪是指将原图片和裁剪的参数一起发给后端,方便服务端保存原图,以及对原图的其他操作,而服务端能够接收到post的参数如下:

3a37d59a34bbc5c6f6c1ecd38da57a0a.png

调整图片

你可以设置 resize 来进行图片的缩放。

设置resize="local" 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。

e3ce37358b73f647cc0bd04b8e1e926e.png

上传多个文件

  • multiple

你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是,你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。

  • multiple-size

你可以使用multiple-size来限制图片的数量,你可以限制上传文件的数量。

压缩图片

设置compress的数值,你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩,数据越大,图片的质量越差,且最大值不能大于100。

8635f70b9cbc413a14cc2da1608d1011.png

向服务端发送数据

你可以设置data 来将一些附带的数据发送给服务端。 当然你也可以将一些数据包含在 header 中传递过去,你只需要绑定到 header即可。

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

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

相关文章

mysql确认半同步命令_怎么判断mysql是否是半同步复制

AFTER_COMMIT(5.6默认值)master将每个事务写入binlog ,传递到slave 刷新到磁盘(relay log),同时主库提交事务。master等待slave 反馈收到relay log,只有收到ACK后master才将commit OK结果反馈给客户端。AFTER_SYNC(5.7默认值,但5.6中无此模式…

《Linus Torvalds自传》摘录

转自:http://www.ruanyifeng.com/blog/2012/09/linus_torvalds.html作者: 阮一峰日期: 2012年9月 3日除了程序员,大概很少人知道Linux操作系统。它的发明者Linus Torvalds,知道的人就更少了。他本人也很低调&#xff0…

python绘制条形图例题_python matplotlib库绘制条形图练习题

练习一:假设你获取到了2017年内地电影票房前20的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据? a ["战狼2","速度与激情8","功夫瑜伽",&quo…

mac mysql 忘记密码 卸载_MySQL忘记密码后重置密码(Mac )

转:http://www.cnblogs.com/lihuanqing/p/5623872.html安装好MySQL以后,系统给了个默认的的密码,然后不小心关了,惨了密码没有了。1、关闭mysql服务器 sudo /usr/local/mysql/support-files/mysql.server stop 也可以在系统偏好里…

Nginx严格访问代理HTTP资源

为什么80%的码农都做不了架构师?>>> 1 严格访问 访问能基于客户端的IP地址允许或拒绝或使用基于HTTP验证。 为了允许或拒绝从某个地址及或所有地址的访问,使用allow和deny指令: location / { deny 192.168.1.2; allow 192.168…

csv 字符串_Python实现json转csv格式

利用Python实现json格式转换为csv文件格式前言本文是学校的课程设计,这里我没有用封装好的json库来实现,而是把读进来的文件当一个字符串来处理,核心函数其实是python的eval()类型转换函数。什么是 JSON?我们要考虑到json格式下key-value对的…

mysql 线性表_数据结构之线性表

概要参考《大话数据结构》,把常用的基本数据结构梳理一下。线性表定义线性表(List):零个或多个数据元素的有限序列。若将线性表记为 \((a_1, \cdots, a_{i-1}, a_i, a_{i1}, \cdots, a_n)\),则表中 \(a_{i-1}\) 领先于 \(a_i\),\(…

sqldeveloper mysql迁移_通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤

通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤发布时间:2020-06-08 15:52:18来源:51CTO阅读:210作者:三月本篇文章给大家主要讲的是关于通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤的内容&#xff0c…

未能成功加载扩展程序_【JAVA虚拟机(JVM)精髓】09-几种不同的类加载器

持续更新JVM相关知识,敬请关注:Java虚拟机精髓专栏​zhuanlan.zhihu.com上一节说了下类加载器和类加载过程。这一节我们看下几种不同的类加载器。JVM支持的类加载器有两类,分别是引导类加载器和自定义加载器。这里的自定义自定义加载器&#…

图片md5修改工具_如何修改视频和图片的MD5,用电脑自带的命令

首先说下,md5到底是啥,它是一段固定长度的数据。无论原始数据是多长或多短,其MD5值都是128bit。另外md5是确定性,一个原始数据的MD5值是唯一的,同一个原始数据不可能会计算出多个不同的MD5值;类似人类的身份…

c语言遍历文件内容_C语言学习第28篇---动态内存分配剖析

为什么C语言要动态分配内存的意义?1.C语言中的一切操作都是基于内存的2.变量和数组都是内存的别名---内存分配由编译器在编译期间决定的---定义数组的时候必须指定数组长度---数组长度是在编译期就必须确定的需求:程序运行的过程中,可能需要使…

重启mysql的命令 linux_linux重启mysql命令

如何启动/停止/重启MySQL一、 启动方式1、使用 service 启动:service mysqld start2、使用 mysqld 脚本启动:/etc/inint.d/mysqld start3、使用 safe_mysqld 启动:safe_mysqld&二、停止1、使用 service 启动:service mysqld s…

javascript原型_使用JavaScript的示例报告卡Web应用程序原型

javascript原型Hi! At times, beginners always find it hard getting the application of the theory they learn In programming or a particular language. 嗨! 有时,初学者总是很​​难在编程或特定语言中应用他们学到的理论。 In this article, we…

vb.net cad 块表最后的实体_21个绘图命令+7个技巧,3分钟让你成为CAD高手

绘制图纸需要用到CAD,CAD制图在生活中也是广泛运用,那么学习CAD到底难不难呢?在这里要告诉CAD新手们,世上无难事,可以用3分钟让你成为CAD高手。21个绘图命令A:绘圆弧B:定义块C:画圆D…

本地tomcat启动war包_「shell脚本」懒人运维之自动升级tomcat应用(war包)

准备:提前修改war包里的相关配置,并上传到服务器;根据要自动升级的tomcat应用修改或添加脚本相关内容;tomcat启动脚本如是自己写的,要统一格式命名,如:xxx、xxxTomcat 等;拿到生产使…

python将txt转为字符串_python做第一只小爬虫

“受尽苦难而不厌,此乃修罗之路”本文技术含量过低,请谨慎观看之前用R语言的Rcurl包做过爬虫,给自己的第一感觉是比较费劲,看着看着发际线就愈加亮眼,最后果断丢之。不过好的是和python爬取原理基本一致,且…

python3 array为什么不能放不同类型的数据_小白入门Python数据科学全教程lt;一gt;...

前言本文讲解了从零开始学习Python数据科学的全过程,涵盖各种工具和方法你将会学习到如何使用python做基本的数据分析你还可以了解机器学习算法的原理和使用说明先说一段题外话。我是一名数据科学家,在用SAS做分析超过5年后,我决定走出舒适区…

c winform 上传文件到mysql_C# winform DevExpress上传图片到数据库【转】

实现功能如下图:注明:此文使用的是DevExpress控件,winform 原生控件也是一样使用方法。1.点击选择图片按钮,功能为通过对话框选择要上传的文件,并将该文件在下面的PictureEdit中显示出来。具体代码如下:pri…

V 8 nfs+drbd+heartbeat

V 8 nfsdrbdheartbeatnfsdrbdheartbeat,nfs或分布式存储mfs只要有单点都可用此方案解决在企业实际生产场景中,nfs是中小企业最常用的存储架构解决方案之一,该架构方案部署简单、维护方便,只需通过配inotifyrsync简单而高效的数据同…

nodemailer使用_如何使用Nodemailer使用HTML作为内容发送电子邮件 Node.js

nodemailer使用Prerequisite: 先决条件: How to send emails using Nodemailer | Node.js 如何使用Nodemailer发送电子邮件。 Node.js How to send emails with attachments using Nodemailer | Node.js 如何使用Nodemailer发送带有附件的电子邮件。 Node.js This …