vue上传图片组件,vue 图片组件
这篇文章主要为大家详细介绍了某视频剪辑软件项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目添加图片裁剪组件的具体代码，供大家参考，具体内容如下
功能如下图所示：
1、安装命令如下
npm i vue-cropper -保存
2、调用组件，引入武埃-克罗珀
从“vue-cropper”导入{ vue cropper }；
3、封装组件代码如下：cropper.vue
模板
div class=cropper_model
埃尔对话
title=图片剪裁
宽度= 800像素
class=cropper_model_dlg
:visible.sync=dialogVisible
附加到正文
:close-on-click-modal=false
:close-on-press-escape=false
div class=cropper_content
div class= cropper style= text-align:center；
vueCropper
"庄稼"
:img=options.img
:outputSize=options.outputSize
:outputType=options.outputType
:info=options.info
:canScale=options.canScale
:autoCrop=options.autoCrop
:自动裁剪宽度=选项。自动裁剪宽度
:auto crophth=选项。“自动裁剪”
:fixed=options.fixed
:fixedBox=options.fixedBox
:fixed number=选项。固定数量
@realTime=previewImg
/vueCropper
div class=cropper_btns
El-button type= primary @ click= goUpload size= mini
重新上传
/el-button
埃尔按钮
@click=rotateLeft
icon=el-icon-refresh-left
size=mini
title=左旋转
/el-button
埃尔按钮
@click=rotateRight
icon=el-icon-refresh-right
size=mini
title=右旋转
/el-button
El-button @ click= change scale(1) size= mini title=放大
/el-button
El-button @ click= change scale(-1) size= mini title=缩小
-
/el-button
/div
/div
div class=cropper_right
h3预览/h3
！-预览-
差异
裁剪者_预览
:style={
宽度：preview.w px ，
高度：preview.h px ，
溢出："隐藏",
边距：“5px”
}
div :style=preview.div
img:src= preview。 URL :style= preview。img alt= /
/div
/div
div style= margin-top:100px；
El-button type= primary @ click= upload img :loading= loading
确定上传
/el-button
/div
/div
/div
！-div slot= footer class= dialog-footer
El-button @ click= downLoad( blob )下载/el-button
El-button @ click=对话框可见=假取消/el-button
El-button type= primary @ click= upload img :loading= loading
确认
/el-button
/div -
/el-dialog
/div
/模板
脚本
从“vue-cropper”导入{ vue cropper }；
导出默认值{
组件：{ VueCropper }，
data() {
返回{
dialogVisible: false，
加载：假，
选项：{
img: ，//裁剪图片的地址
outputSize: 1，//裁剪生成图片的质量
outputType: png ，//裁剪生成图片的格式
info: true，//裁剪框的大小信息
canScale: true，//图片是否允许滚动缩放
autoCrop: true，//是否默认生成截图狂
自动裁剪宽度：100,//默认生成截图框宽度
自动裁剪：100，//默认生成截图框高度
fixed: true，//是否开启截图框宽高固定比例
固定号码：[1,1],//截图框的宽高比例
full: true，//是否输出原图比例的截图
fixedBox: true，//固定截图框大小不允许改变
canMove: true，//上传图片是否可以移动
canMoveBox: true，//截图框能否拖动
original: true，//上传图片按照原始比例渲染
中心框：false，//截图框是否被限制在图片里面
高：假，//是否按照设备的项目文件输出等比例图片
infoTrue: true，//true为展示真实输出图片宽高错误的展示看到的截图框宽高
maximgSize: 100，//限制图片最大宽度和高度
放大：1,//图片根据截图框输出比例倍数
模式：包含//图片默认渲染方式（包含、覆盖、100像素、100%自动)
},
预览：{}
};
},
方法：{
打开（数据){
this.options.img=window .URL.createObjectURL(数据);
this.dialogVisible=true
},
close(){
this.dialogVisible=false
},
//base64转图片文件
数据文件(数据URL，文件名){
let arr=dataurl.split(，)；
设mime=arr[0].匹配(/:(。*?);/)[1];
设bstr=atob(arr[1])；
设len=bstr .长度
设u8 arr=新的uint 8数组(len)；
while (len - ) {
u8arr[len]=bstr。charcode at(len)；
}
返回新文件([u8arr]，文件名，{ type:mime })；
},
下载（类型){
事件。防止默认()；
const aLink=文档。createelement( a )；
if (type===blob) {
这个参考文献。克罗珀。getcropblob(数据={
放下窗户.URL.createObjectURL(数据);
阿林克。下载=照片。png ；
aLink.href=downImg
阿林克。单击()；
});
}否则{
这个参考文献。克罗珀。获取作物数据(数据={
让文件=这个。dataurltofile(数据，测试)；
aLink.href=file
阿林克。单击()；
});
}
},
//左旋转
rotateLeft() {
这个参考文献。克罗珀。rotate left()；
},
//右旋转
向右旋转(){
这个参考文献。克罗珀。rotator right()；
},
//放大缩小
变更比例（数量){
num=num 1；
这个参考文献。克罗珀。更改比例(数字)；
},
//实时预览
预览（数据){
this.preview=data
},
goUpload() {
这个$ emit(再涨)；
},
//上传图片
uploadImg() {
让自我=这个；
自加载=真
这个参考文献。克罗珀。获取作物数据(数据={
让文件=这个。dataurltofile(数据，照片。png’)；
//生成文件类型
自加载=假
这个发出( getFile ，File)
});
},
//自定义上传，裁剪后调用
}
};
/脚本
style lang=less 范围。cropper_model_dlg {。cropper_content {
边距：0自动；
宽度：700像素
高度：450像素
显示器：flex
justify-content:space-between；
align-items:flex-start；
}。收割者
宽度：400像素
高度：400像素
背景：黄色；
}。右侧裁剪器{
宽度：300像素
文本对齐：居中；
}。裁剪者_预览{
边距：0自动；
显示：内嵌-块；
边框：1px固体# ddd
}。cropper_btns {
边距-顶部：20px
}
}
/风格
4、在其他某视频剪辑软件组件使用，引用cropper.vue
从导入我的庄稼./cropper.vue
导出默认值里面添加
组件：{MyCropper}，
超文本标记语言中引入
my-cropper ref= my cropper @ getFile= getFile @ up again= up again /my-cropper
对应的射流研究…方法代码
upAgain(){
这个refs[上传].$refs[upload-inner].句柄click()；
},
获取文件(文件){
const formData=new formData()；
formData.append(file ，file)
uploadSelfCompanyLogo(formData).然后(res={
if (res.code===0) {
这个。公司信息。logo=RES . filename
这个。公司信息。imageurl=RES . URL
这个。imageurl=RES . URL
//上传成功后，关闭弹框组件
//这个。处理作物(文件)；
这个. refs.myCropper.close()
}否则{
这个message.error(上传出错);
}
})
//这个参考文献。上传。submit()；
},
注意：以上代码并不完整，裁剪组件和elementUI组件中的埃尔-上传的结合使用方法如链接裁剪组件和埃尔-乌普洛德结合
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。