vue 图片压缩上传,vue怎么去做上传图片功能

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现图片裁剪后上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现图片裁剪后上传的具体代码，供大家参考，具体内容如下

　　一、背景

　　目前负责的系统（商城后台管理系统)里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。(其它地方有时会有5:4或者16:9的需求，但较少)。所以需要对上传的图片先进行裁剪，并且按要求只能裁剪为1:1,然后在进行上传。

　　当然，为了兼容系统其它地方有5:4或者16:9的图片比例需求，需要给出一个参数，可以随时控制图片裁剪的比例。

　　二、使用什么插件实现

　　使用武埃-克罗珀显示，该插件是基于农作物的二次封装，简单小巧，更合适某视频剪辑软件项目。注意：功能没有农作物强大。

　　三、使用 cropper

　　3.1 封装一下庄稼，配置自己想要的参数

　　模板

　　div class=Cropper

　　埃尔对话

　　:visible.sync=dialogVisible

　　宽度= 740像素

　　title=图片裁剪

　　:before-close=handleClose

　　:close-on-click-modal=false

　　差异

　　农作物容器

　　div class=cropper-el

　　武埃-克罗珀

　　"庄稼"

　　:img=cropperImg

　　:output-size=option.size

　　:output-type=option.outputType

　　:info=true

　　:can-move=option.canMove

　　:can-move-box=选项。 canmovebox

　　:fixed-box=option.fixedBox

　　:auto-crop=option.autoCrop

　　:自动裁剪宽度=选项。自动裁剪宽度

　　:自动裁剪高度=选项。“自养”

　　:center-box=option.centerBox

　　:high=option.high

　　:info-true=option.infoTrue

　　@realTime=realTime

　　:amplify=选项。“放大”

　　:fixed=option.fixed

　　:fixed-number=选项。固定数量

　　:limit minsize=选项。限制最小大小

　　/

　　/div

　　！-预览==我不需要预览-

　　！- div class=prive-el

　　强烈的预览：/strong

　　 div class= prive-style :style= { width : 200 px ， height: 200px ， overflow: hidden ， margin: 10px 25px ， display:flex ， align-items : center}

　　div class= prive-style :style= { width :预览。 w px ， height: previews.h px ， overflow: hidden ， margin: 10px 25px ， display:flex ， align-items : center}

　　div class= preview :style= previews。div

　　img:src=预览。 URL :style=预览。 img

　　/div

　　/div

　　el-button @click=uploadBth 重新上传/el-button

　　/div -

　　/div

　　跨度

　　slot=页脚

　　 class=对话框页脚

　　el-button @click=uploadBth 重新上传/el-button

　　埃尔按钮

　　@click=handleClose 取消/el-button

　　埃尔按钮

　　type=primary

　　@click=saveImg 确定/el-button

　　/span

　　/el-dialog

　　/div

　　/模板

　　脚本

　　从“vue-cropper”导入{ vue cropper }；

　　导出默认值{

　　姓名："裁剪工",

　　组件：{

　　VueCropper

　　},

　　道具：{

　　对话框可见：{

　　类型：布尔型，

　　默认值：错误

　　},

　　imgType: {

　　类型：字符串，

　　默认值：" blob "

　　},

　　cropperImg: {

　　类型：字符串，

　　默认值：""

　　},

　　zoomScale: { //裁剪比例，默认1:1

　　类型：数组，

　　默认值：[1,1]

　　}

　　},

　　data () {

　　返回{

　　预览：{},

　　选项：{

　　img: ，//裁剪图片的地址

　　尺寸：1,//裁剪生成图片的质量

　　outputType: png ，//裁剪生成图片的格式默认使用联合图象专家组文件交换格式存储的编码图像文件扩展名

　　canMove: false，//上传图片是否可以移动

　　fixedBox: false，//固定截图框大小不允许改变

　　canMoveBox: true，//截图框能否拖动

　　autoCrop: true，//是否默认生成截图框

　　//只有自动截图开启宽度高度才生效

　　自动裁剪宽度：500,//默认生成截图框宽度

　　自养：500,//默认生成截图框高度

　　centerBox: true，//截图框是否被限制在图片里面

　　高：假，//是否按照设备的项目文件输出等比例图片

　　放大：1,//图片根据截图框输出比例倍数

　　模式："包含",//图片默认渲染方式

　　maxImgSize: 2000，//限制图片最大宽度和高度

　　//limitMinSize: [500，500]，//更新裁剪框最小属性

　　limitMinSize: 500，//更新裁剪框最小属性

　　infoTrue: true，//true为展示真实输出图片宽高错误的展示看到的截图框宽高

　　fixed: true，//是否开启截图框宽高固定比例（默认：真)

　　//fixedNumber: [1，1] //截图框的宽高比例==这个参数目前没有作用（作者解释的)

　　fixedNumber: this.zoomScale //截图框的宽高比例

　　},

　　};

　　},

　　方法：{

　　//裁剪时触发的方法，用于实时预览

　　实时（数据){

　　this.previews=数据

　　},

　　//重新上传

　　uploadBth () {

　　这个. emit( update-cropper )；

　　},

　　//取消关闭弹框

　　handleClose () {

　　这个. emit(colse-dialog ，false)；

　　},

　　//获取裁剪之后的图片，默认斑点，也可以获取base64的图片

　　saveImg () {

　　if (this.imgType===blob) {

　　这个参考文献。克罗珀。getcropblob(数据={

　　这个. emit(upload-img ，data)；

　　});

　　}否则{

　　这个参考文献。克罗珀。获取作物数据(数据={

　　this.uploadFile=data

　　这个. emit(upload-img ，data)；

　　});

　　}

　　}

　　}

　　};

　　/脚本

　　样式lang=scss 范围。收割者。克罗珀埃尔

　　高度：700像素

　　宽度：700像素

　　伸缩：0;

　　}。农作物-容器{

　　显示器：flex

　　justify-content:space-between；特权

　　flex:1；

　　自我对齐：居中；

　　文本对齐：居中；私人风格{

　　边距：0自动；

　　flex:1；

　　-WebKit-flex:1；

　　显示器：flex

　　显示：-WebKit-flex；

　　对齐-内容：居中；

　　-WebKit-justify-content:center；

　　溢出：隐藏；

　　背景：# eded

　　左边距：40px

　　}。预览{

　　溢出：隐藏；

　　}。埃尔按钮{

　　边距-顶部：20px

　　}

　　}

　　}

　　}

　　/风格

　　样式lang=scss 。裁剪框-画布图像{

　　宽度：100%!重要；

　　身高：100%!重要；

　　}

　　/风格

　　3.2 将埃尔-上传和农作物组合，封装，其他地方可以直接调用

　　模板

　　差异

　　！-注意：必须关闭自动上传属性自动上传-

　　埃尔-上传

　　:http-request=Upload

　　:multiple=true

　　list-type=图片卡

　　:file-list=productImageList

　　:on-remove=removeImage

　　:limit=12

　　:before-upload= beforeAvatarUpload

　　ref=fileUpload

　　：自动上传=假

　　:on-change=selectChange

　　操作=

　　裁剪者-上传盒

　　I slot= default class= El-icon-plus /I

　　/El-上传

　　农作物

　　v-if=showCropper

　　:dialog-visible=showCropper

　　:cropper-img=cropperImg

　　:zoomScale=zoomScale

　　@update-cropper=updateCropper

　　@colse-dialog=closeDialog

　　@upload-img=uploadImg

　　/

　　/div

　　/模板

　　脚本

　　从" @/组件/裁剪器"导入裁剪器；

　　从" @/utils/alioss "导入{ client，randomWord }

　　导出默认值{

　　名称： CropperUpload ，

　　data() {

　　返回{

　　productImageList: []，

　　showCropper: false，//是否显示裁剪框

　　cropperImg: //需要裁剪的图片

　　};

　　},

　　道具：{

　　defaultImgList: { //默认显示的图片列表

　　类型：数组，

　　默认值：()=[]

　　},

　　zoomScale: { //裁剪比例，默认1:1

　　类型：数组，

　　默认值：[1,1]

　　}

　　},

　　组件：{

　　农作物

　　},

　　观察：{

　　defaultImgList: {

　　处理程序：函数(新瓦尔，旧瓦尔){

　　this.productImageList=newVal //赋值

　　},

　　深：真的

　　}

　　},

　　方法：{

　　在AvatarUpload之前(文件){

　　const islt 2m=文件。尺寸/1024/1024 2；//原图片

　　//const islt 2m=this。上传文件。尺寸/1024/1024 1；//裁剪后的图片（会比原图片大很多，应该是转成一滴的原因导致)

　　如果(!isLt2M) {

　　这个message.error(上传图片大小不能超过2MB！);

　　this.noCanUpload=true //如果这里被拦截，将自动删除不能上传的图片

　　返回错误的

　　}

　　//返回isLt2M

　　},

　　移除图像(文件，文件列表){

　　常量索引=this。产品图像列表。查找索引(项目={

　　退货项目。uid==文件。uid

　　});

　　if (index -1) {

　　this.productImageList.splice(索引，1);

　　}

　　这个. emit(getUploadImg ，this.productImageList) //把最新上传的图片列表返回

　　},

　　上传（文件){

　　var fileName=`img/${randomWord(

　　没错，

　　20

　　)} $ {新日期()} $ {文件。文件。姓名。substr(文件。文件。姓名。(“.”的索引)))}`;

　　//客户端()。放(文件名，文件。文件)。然后（结果={

　　客户端()。上传（文件名，this.uploadFile)。然后（结果={

　　//上传裁剪后的图片

　　console.log(结果);

　　this.productImageList.push({

　　url: result.url

　　uid: file.file.uid，

　　保存URL:“/”结果。名字

　　});

　　this.showCropper=false

　　这个. emit(getUploadImg ，this.productImageList) //把最新上传的图片列表返回

　　})。接住(错误={

　　this.showCropper=false

　　控制台。日志(错误)；

　　});

　　},

　　//更新图片

　　updateCropper() {

　　如果(!this.noCanUpload){

　　让fileList=this .$refs.fileUpload.uploadFiles //获取文件列表

　　让索引02=文件列表。查找索引(item={//把取消裁剪的图片删除

　　退货项目。uid==this。当前文件。uid

　　});

　　fileList.splice(index02，1)

　　}

　　让索引=this .$参考文献。文件上传。$儿童。长度-1；

　　这个参考文献。文件上传。$ children[index].$ El。单击()；

　　},

　　//关闭窗口

　　closeDialog() {

　　this.showCropper=false

　　如果(!this.noCanUpload){

　　让fileList=this .$refs.fileUpload.uploadFiles //获取文件列表

　　让索引=文件列表。查找索引(item={//把取消裁剪的图片删除

　　退货项目。uid==this。当前文件。uid

　　});

　　fileList.splice(索引，1)

　　}

　　},

　　//上传图片

　　上传（文件){

　　this.uploadFile=file

　　//这个参考文献。文件上传。submit()；

　　//判断裁剪后图片的宽高

　　让img=新图像()

　　img.src=window .URL.createObjectURL(文件);//Blob转成全球资源定位器(统一资源定位器)才能给图片显示

　　img.onload=()={

　　设minProp=Math.min(img.width，img.height) //裁剪后的图片宽，高==取最小值

　　if( minProp 500){ //如果最小值比设置的最小值（默认为500)小

　　这个$消息。错误(` m请保证图片短边最小为500`);

　　返回错误的

　　}

　　这个参考文献。文件上传。submit()；

　　}

　　},

　　选择更改（文件){

　　this.noCanUpload=false

　　let files=file.raw

　　var reader=new FileReader()；

　　reader.onload=e={

　　让数据；

　　如果(e .目标的类型。result=== object ){

　　//把数组缓冲器转化为一滴如果是base64不需要

　　数据=窗口URL.createObjectURL(新斑点([例如目标。结果])；

　　}否则{

　　数据=e .目标。结果；

　　}

　　this.cropperImg=data

　　//图片图片尺寸，如果是正方形，则直接上传；否则调用裁剪

　　让img=新图像()

　　img。src=这个。cropperimg

　　img.onload=()={

　　if(img.width==img.height){ //本来就是正方形=直接上传

　　this.uploadFile=files

　　这个参考文献。文件上传。submit()；//调用上传方法

　　}否则{

　　this.showCropper=true//不是正方形的图片才开启裁剪

　　this.currentFile=file //保存当前操作裁剪的图片

　　}

　　}

　　};

　　//转化为base64

　　//reader.readAsDataURL(文件)

　　//转化为一滴

　　reader.readAsArrayBuffer(文件);

　　//这个。show cropper=true//默认开启裁剪

　　}

　　}

　　};

　　/脚本

　　样式lang=scss 。裁剪者-上传框{

　　显示器：flex。埃尔-上传{

　　宽度：148像素

　　身高：148像素

　　}

　　}

　　/风格

　　3.3 其他页面中调用裁剪组件

　　！-

　　zoomScale:定义的裁剪比例；

　　默认列表：默认显示的图片列表

　　@getUploadImg:这个事件将得到更新后（上传、删除)的图片列表，在页面中重新赋值给默认的列表变量后就可以做页面中的逻辑处理了

　　-

　　cropper-upload :zoomScale=[1，1]:defaultimlist= product imagelist @ getUploadImg= getUploadImg /cropper-upload

　　自此，图片裁剪功能实现！

　　3.4 看一下页面中的效果

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。