Vue project picture cut upload--vue-cropper use

Recently in the study of Vue, and then did a small back-office management system used to practiced hand, the development process, the thought of cutting pictures to upload the user avatar needs. Internet Baidu, found a lot of use is vue-cropper. I also use, personal feeling is very useful. Now here's a simple demo to show you how to use Vue-cropper.

Where the user's Avatar upload interface is written in Java, interested in the words can refer to my December 2, 2017 blog: front-end separation cross-server file upload-java SPRINGMVC version

1, installation Vue-cropper

Using NPM to install Vue-cropper locally

NPM Install Vue-cropper--save-dev

2. Create a new Test.vue file

This file is only used to demonstrate the ability to cut uploaded images, directly below the code

Test.vue:

<template> <div style= "Display:flex;" > <div class= "Info-item" style= "flex:1;" > <div style= "width:120px;height:120px;border-radius:50%;overflow:hidden;margin-left:123px;border:1px solid    #ddd ">  </div> </div> <div class= "Info-item" style= "flex:1;margin-left:-160px;margin-top:30px;" > <label class= "btn Btn-orange" for= "uploads" style= "display:inline-block;width:70px;padding:0;text-align:center;line-height:28px;" > select picture </label> <input type= "file" id= "uploads": value= "Imgfile" style= "Position:absolute; Clip:rect (0 0 0 0); "accept=" Image/png, Image/jpeg, Image/gif, image/jpg "@change =" uploadimg ($event, 1) "> <inpu T type= "button" class= "oper" style= "height:20px;width:23px;font-size:20px;margin:3px 5px;" value= "+" title= "@ Click= "Changescale (1)" > <input type= "button" class= "oper" style= "height:20px;width:23px;font-size:20px"; MARGIN:3PX 5px; "value="-"title=" Zoom Out "@click =" Changescale ( -1) "> <input type=" button "class=" oper "style=" height : 20px;width:23px;font-size:20px;margin:3px 5px; "value="? "title=" Left rotation "@click =" Rotateleft "> <input type=" Butto N "class=" oper "style=" height:20px;width:23px;font-size:20px;margin:3px 5px; "value="? "title=" right rotation "@click =" Rotateright "> <input type=" button "class=" oper "style=" height:20px;width:23px;font-SIZE:20PX;MARGIN:3PX 5px; "value=" ↓ "title=" Download "@click =" Down (' blob ') "> <input type=" button "class=" Btn Btn-blue "Value=" upload Avatar "@click =" Finish (' blob ') "> <div class=" line "style=" Margin-left: -280px;margin-top:85px; " > <div class= "cropper-content" style= "margin-top:-60px;margin-left:260px;" > <div class= "Cropper" > <Vuecropper ref= "Cropper": IMG= "Option.img": Outputsize= "Option.size": OutputType= "Option.outputtype": Info= "true": Full= "Option.full": Canmove= "Option.canmove": Canmovebox= "Option.canmovebox": Original= "Option.original": Autocrop= "Option.autocrop": Autocropwidth= "Option.autocropwidth": Autocropheight= "Option.autocropheight": Fixedbox= "Option.fixedbox"@realTime= "RealTime"@imgLoad= "Imgload" ></vueCropper> </div> <div style= "margin-left:20px;"  > <div class= "show-preview": style= "{' width ': ' 150px ', ' height ': ' 155px ', ' overflow ': ' Hidden ', ' margin ': ' 5px ' > <div:style= "previews.div" class= "Preview" >  </div> </div> </div> </div> &L T;/div> </div> </div></template><script>Import Vuecropper from' Vue-cropper 'Import Api from' @/js/api.js '//interface URL configuration fileExportdefault{data () {return{headimg:‘‘,        //Cut picture UploadCrapfalse, previews: {}, Option: {img:‘‘, Outputsize:1,//picture quality after cut (0.1-1)Fullfalse,//output original ratio props name fullOutputType: ' PNG ', Canmove:true, Original:false, Canmovebox:true, Autocrop:true, Autocropwidth:150, Autocropheight:150, Fixedbox:true}, FileName:‘‘,//Native file AddressDownimg: ' # ', Imgfile:‘‘, Uploadimgrelapath:‘‘,//The address of the uploaded image (without the server domain name)}}, components: {Vuecropper}, methods: {      //Zoom In/ Zoom OutChangescale (num) {Console.log (' Changescale ') Num= num | | 1;  This. $refs. Cropper.changescale (num); },       //sit and rotateRotateleft () {Console.log (' Rotateleft ')         This. $refs. Cropper.rotateleft (); },       //Rotate Rightrotateright () {Console.log (' Rotateright ')         This. $refs. Cropper.rotateright (); },       //Upload a picture (click the Upload button)Finish (type) {Console.log (' Finish ') Let _this= This; Let FormData=NewFormData (); //Output        if(Type = = = ' blob ')) {            This. $refs. Cropper.getcropblob (data) ={let img=window. Url.createobjecturl (data) This. Model =true;  This. MODELSRC =img; Formdata.append ("File", data, This. FileName);  This. $http. Post (Api.uploadSysHeadImg.url, FormData, {contentType:false, ProcessData:false, headers:{' content-type ': ' application/x-www-form-urlencoded '}}). Then ((response)={              varres =Response.data; if(Res.success = = 1){                $(' #btn1 '). Val ('); _this.imgfile= ' '; _this.headimg= Res.realpathlist[0];//Full path_this.uploadimgrelapath = res.relapathlist[0];//non-full path_this. $message ({ //element-ui MSG Message message Hint component  type:' Success ', message:' Upload success '                }); }            })          })         } Else {            This. $refs. Cropper.getcropdata (data) = {              This. Model =true;  This. MODELSRC =data; })         }       },       //Real-time preview functionrealTime (data) {Console.log (' RealTime ')         This. Previews =Data},//Download ImageDown (type) {Console.log (' Down ')        varALink = document.createelement (' A ') Alink.download= ' author-img 'if(Type = = = ' blob ')) {            This. $refs. Cropper.getcropblob (data) = {              This. downimg =window. Url.createobjecturl (data) Alink.href=window. Url.createobjecturl (data) Alink.click ()})}Else {            This. $refs. Cropper.getcropdata (data) = {              This. downimg =data; Alink.href=data; Alink.click ()})},//Select a local pictureuploadimg (E, num) {Console.log (' Uploadimg '); var_this = This; //Upload Image        varFile = E.target.files[0] _this.filename=File.name; if(!/\. (gif|jpg|jpeg|png|bmp| Gif| Jpg| PNG) $/. Test (E.target.value)) {Alert (' The picture type must be one of the. Gif,jpeg,jpg,png,bmp ')           return false         }         varReader =NewFileReader (); Reader.onload= (e) = ={let data; if(typeofE.target.result = = = ' object ') {             //Convert array buffer to BLOB if Base64 is not requireddata = window. Url.createobjecturl (NewBlob ([E.target.result])} Else{Data=E.target.result}if(num = = 1) {_this.option.img=Data}Else if(num = = 2) {_this.example2.img=Data}} //Convert to Base64        //reader.readasdataurl (file)        //Convert to Blobreader.readasarraybuffer (file); }, Imgload (msg) {Console.log (' Imgload ') Console.log (msg)}},}</script><style lang= "Less" >. info {width:720px; Margin:0Auto; . Oper-DV {height:20px; Text-Align:right; Margin-right:100px; A {font-weight:500; &:last-Child {margin-left:30px; }}}. info-Item {margin-top:15px; Label {Display:inline-Block;        width:100px; Text-Align:right; }. Sel-img-DV {position:relative; . SEL-file {position:absolute;          width:90px;          height:30px; Opacity:0;          Cursor:pointer; Z-index:2; }. Sel-btn {position:absolute;          Cursor:pointer; Z-index:1; } }}}. cropper-content{Display:flex; Display:-webkit-Flex; Justify-content:flex-end; -webkit-justify-content:flex-end;      . cropper{width:260px;    height:260px; }. Show-preview{Flex:1; -webkit-flex:1;      Display:flex; Display:-webkit-Flex; Justify-Content:center; -webkit-justify-Content:center;        . preview{Overflow:hidden; Border-radius:50%;        border:1px solid #cccccc;        Background: #cccccc; Margin-left:40px; }}}. Cropper-content. Show-preview. Preview {margin-left:0;} </style>

Where the Js/api.js file is the configured interface address

3. Effect

1. Open Page Effect

2. Click the Select Picture button to select the effect after the local picture

After selecting the picture, you can zoom in, zoom out and rotate the picture, and you can move the check box and select any part of the image to upload.

3, click the Upload Avatar button, you can call upload Avatar interface, the avatar uploaded to the file server

At this point, the picture has been uploaded successfully, view the picture server specified directory, you can see the picture is already on the server

Vue project picture cut upload--vue-cropper use