vue照片墙使用crooper.js

找了很多代码但是都没啥用，最后根据官方文档融合了出来，不喜勿喷

思路：很简单就是照片墙每次上传的图片都要进行图片处理然后才回显到页面上。废话不多说直接上图看代码

需要引入的组件
html页面引入vue+eleement （不会自己百度），在脚手架做的朋友就不用引了
cropper.css bootstrap.css
cropper.js jquery
html页面（两个部分 1弹窗 2照片墙）

<!-- 用于裁切的弹窗 --><el-dialog:visible.sync="isShowDialog"title="图片裁切"width="50%" height="60%"top="10vh":close-on-click-modal="false"><div><img src="" id="photo" style="max-width: 100%;" /></div><template #footer><div style="text-align: center;margin-top: 10px;"><el-button @click="isShowDialog = false">取消</el-button><el-button type="primary" @click="getResult">裁切</el-button></div></template><!-- 图片裁切插件 --></el-dialog><!-- 用于裁切的弹窗 --><!-- 照片墙 --><el-uploadclass="uploadhide":action="imgupload"list-type="picture-card":limit="10":on-preview="handlePictureCardPreview":on-success="handSuccess" :before-upload="beforeUpload":file-list="fileList":on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog><!-- 照片墙 -->

vue中data数据

newFile : [],//上传文件的信息previewImage : '',//预览isShowDialog : false,//裁剪弹窗控制limitCount: 10,//上传限制数量optionsimg : {aspectRatio: (4/3), // 纵横比viewMode: 1,preview: '.img-preview' // 预览图的class名},fileList: [],//文件列表dialogVisible: false,//预览弹窗imgupload:serviceUrl+'upload/imgzip'//上传路径

method方法

handSuccess(response, file, fileList) {this.fileList = fileList},handleRemove(file, fileList) {this.fileList = fileList$(".el-upload--picture-card").css("display","inline-block");//显示上传框},handlePictureCardPreview(file) {//预览this.dialogImageUrl = file.url;this.dialogVisible = true;},handleExceed(files, fileList) {this.$message.error("最多只能上传10张图片");},//图片上传前处理（组织图片的默认上传行为）beforeUpload(file){const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {this.$message.error('只能上传jpg、png、jpeg类型的图片');}const isLt10M = file.size / 1024 / 1024 < 10;if (!isLt10M) {this.$message.error('文件必须小于10MB!');}if( isJpgOrPng && isLt10M){this.newFile = file;let that = this;this.isShowDialog = true;return new Promise((resolve, reject) => {this.$nextTick(() => {//这部操作时等弹窗加载完毕，要不cropper读取不到隐藏弹窗的容器高宽let $image = $("#photo");$image.cropper(that.optionsimg);let uploadedImageURL;// 如果URL已存在就先释放if (uploadedImageURL) {URL.revokeObjectURL(uploadedImageURL);}uploadedImageURL = URL.createObjectURL(that.newFile);// 销毁cropper后更改src属性再重新创建cropper$image.cropper('destroy').attr('src', uploadedImageURL).cropper(that.optionsimg);//$inputImage.val('');// 显示裁切弹窗// 清空已选择的文件reject(false);});})}else{//阻止上传return new Promise((resolve, reject) => {reject(false);});}},//裁剪图片并上传服务器返回图片路径赋值给fileListgetResult(){var that = this;var $image = $("#photo");$image.cropper('getCroppedCanvas',{}).toBlob(function(blob){//blob转filevar filesc = new window.File([blob], that.newFile.name, {type: that.newFile.type});console.log(filesc)var formData = new FormData();formData.append('act',"upload_file");formData.append('file',filesc);$.ajax({type : "post",url : that.imgupload,data : formData,processData : false,contentType : false,success : function(res){console.log(res)let arrlist = {name:filesc.name,url:res.data};that.fileList.push(arrlist);if(that.fileList.length>=that.limitCount){$(".el-upload--picture-card").css("display","none");//隐藏上传框}that.isShowDialog = false;},error : function(err){}});});},

到这里就结束了哦，各位有什么不懂得再问小编 VX QQ同步 549534025

vue照片墙使用crooper.js相关推荐

vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue+element 封装公共js代码
一.多个 js 方法,不想用 vue.prototype 二.使用Vue.prototype 封装公共 js 三.封装的方法较多,又想通过this.直接调用一.多个 js 方法,不想用 vue.pr ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验
安装linter-eslint插件方式有如下几种. 1. 最简单的方式就是点击 File -Settings -Install ,搜索linter-eslint ,安装即可 2. # 进入atom ...
This relative module was not found: * ./components/goods/Cate.vue in ./src/router.js
在Vscode中运行项目文件(npm run serve)时出现错误:Failed to compile with 1 errors 10:14:35 This relative module was ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...

vue照片墙使用crooper.js

vue照片墙使用crooper.js

vue照片墙使用crooper.js相关推荐

最新文章

热门文章