vue照片墙使用crooper.js

vue照片墙使用crooper.js

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

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

1. 需要引入的组件
   html页面引入vue+eleement （不会自己百度），在脚手架做的朋友就不用引了
   cropper.css bootstrap.css
   cropper.js jquery
2. 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-upload
	  class="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>
 <!-- 照片墙 -->

3. 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'//上传路径

4. 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);
    	});
    }
   },
     
    //裁剪图片并上传服务器返回图片路径赋值给fileList
    getResult(){
      var that = this;
      var $image = $("#photo");
       $image.cropper('getCroppedCanvas',{
      }).toBlob(function(blob){
        //blob转file
      	var 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