项目中关于图片上传与剪裁的流程

1.文件的上传主要是基于<ipt type="file">的属性点击（点击行为则是通过在ipt上绑定ref=“名字”属性获取元素，然后在点击的时候$refs.名字.click（）去模拟点击）之后就可以上传文件了

注意：需要把利用ipt的hidden属性将ipt框隐藏起来，不让其在页面展示

其中accept属性是允许接收的文件类型，multiple允许传入多个文件。

2.如何获取选择以后的图片的值，通过给ipt绑定change事件监视变化，进而去获取我们传入图片的值（但是不要使用.value，因为不同的操作系统可能会出现错误）一般使用元素本身的files伪数组（this.$refs.名字.files[0]），获得的二进制对象。

3.当我们得到二进制对象以后，我们要知道（我们编辑图片的位置）图片的src属性只能识别两种类型正常的src和Base64所以我们要将我们得到的二进制对象转换成Base64编码格式。

4.如何将二进制对象----->Base64 就要利用JS中的文件阅读器（FileReader）他是一个构造函数使用的话创建即可。（示例如下）

eg：

1.const fr = new FileReader（）

2.fr.readAsDataURL（file）传入要读取的二进制对象

3.由于其是异步操作所以接收结果需要

Fr.onload = (e)=>{ e.target.result} 其中 e.target.result就是得到的Base64

由于上述代码，复用性不高，因此可以将我们转换的过程抽离出来单独封装成一个函数，使用时直接导入调用即可封装如下

异步调用即可

过程中会遇到两个bug

第一个是：当你选中了一张图片然后你又选中它的时候

不能够选中这时候只需要将ipt的value置空即可 this.$refs.名字.value=‘’

第二个是：当你选中一张图片时选中其他的会被原来的图片遮住，这是因为我们剪裁插件的原因，只需要通过v-if让上传图片的组件销毁再创建就行

关于剪裁图片的插件的使用网址：cropperjs实践及中文文档（自译） - 灭灭 - 博客园 (cnblogs.com)

插件使用：

项目中关于图片上传与剪裁的流程相关推荐

Gitee+typora+picgo+插件，markdown图床配置，一键将markdown中本地图片上传至图床
一键将markdown中本地图片上传至图床推荐配置:Gitee+typora+picgo+插件文章目录安装 picgo 配置 typora 配置 Gitee 图床配置图床设置配置 typor ...
详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件功能需求实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
10分钟教你搭建nexus,并把自己项目中的依赖上传到私服
1.先安装maven 官网 https://maven.apache.org/download.cgi 2.下载方式 (1) 先去官网下载查看以前maven的地址: https://archive. ...
自动将*.md文档中的图片上传到Gitee（Typora+PicGo+Gitee）
1. 存在问题很多刚接触markdown文档格式的友友们,在使用文档中的图片时还存在一些问题:直接将截图下来的图片或是本机图片粘贴在文档中,图片的地址还是本地文件的地址(如D:\xxx),这种情况下 ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
Springboot+vue前后端分离(所有项目通用)-实现图片上传
前情说明:本代码暂时只供本人实用,可以实现效果,如大家有觉得需要改进或者可以用到的地方,可以随时给我建议和意见谢谢前端vue 按钮 <el-buttonv-model="form. ...
企业WEB项目商品管理图片上传
文章目录一.商品基本信息录入 1.电商概念SPU与SKU 2.商品分类 2.1需求分析 2.2前端 3.商品介绍 3.1富文本编辑器介绍 3.2使用kindeditor 4.选择商品分类 4.1一级 ...
vant 组件库中的图片上传组件（多张图片上传，删除图片传自定义参数）
html部分 js部分图片上传前,限制图片格式.图片上传后,上传七牛云接口返回图片url,赋值给图片路径变量. 图片删除坑:vant上传组建中内置的删除事件,默认携带两个参数,file和detai ...

项目中关于图片上传与剪裁的流程

项目中关于图片上传与剪裁的流程相关推荐

最新文章

热门文章