vue+element+vue-cropper實(shí)現(xiàn)圖片裁剪功能
1、下載插件：npm install --save vue-cropper
2、全局注冊插件掛在到全局的vue上?
import { VueCropper } from 'vue-cropper';
Vue.component('VueCropper',VueCropper);
html部分：
element 的el-upload插件
上傳圖片插件
<el-upload
? ? ? ? ? ? ? class="avatar-uploader"
? ? ? ? ? ? ? :action="UPLOAD_FILE"
? ? ? ? ? ? ? :show-file-list="false"
? ? ? ? ? ? ? :on-change="selectImgFn"
? ? ? ? ? ? ? :auto-upload="false"
? ? ? ? ? ? ? :before-upload="beforeUpload">
? ? ? ? ? ? ? <img v-if="form.imgurl" :src="form.imgurl" class="avatar" />
? ? ? ? ? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i>
? ? ? ? </el-upload>
裁剪圖片框：
? ??????<vueCropper
? ? ? ? ? ? ? ref="cropper"
? ? ? ? ? ? ? :img="option.img"
? ? ? ? ? ? ? :outputSize="option.outputSize"
? ? ? ? ? ? ? :outputType="option.outputType"
? ? ? ? ? ? ? :info="option.info"
? ? ? ? ? ? ? :canScale="option.canScale"
? ? ? ? ? ? ? :autoCrop="option.autoCrop"
? ? ? ? ? ? ? :autoCropWidth="option.autoCropWidth"
? ? ? ? ? ? ? :autoCropHeight="option.autoCropHeight"
? ? ? ? ? ? ? :fixed="option.fixed"
? ? ? ? ? ? ? :fixedBox="option.fixedBox"
? ? ? ? ? ? ? :fixedNumber="option.fixedNumber"
? ? ? ? ? ? ></vueCropper>
js
data部分：
export default {
? data() {
? ? return {
? ??????fileName："",
? ? ? ? newImgUrl:"",
????????option: {
? ? ? ? ????img: '', // 裁剪圖片的地址
? ? ? ? ????info: true, // 裁剪框的大小信息
? ? ? ? ????outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
? ? ? ????? outputType: 'png', // 裁剪生成圖片的格式
? ? ? ? ????canScale: false, // 圖片是否允許滾輪縮放
? ? ? ? ????autoCrop: true, // 是否默認(rèn)生成截圖框
? ? ? ? ????autoCropWidth: 300, // 默認(rèn)生成截圖框?qū)挾?/p>
? ? ? ????? autoCropHeight: 210, // 默認(rèn)生成截圖框高度
? ? ? ? ????fixedBox: true, // 固定截圖框大小 不允許改變
? ? ? ? ????fixed: true, // 是否開啟截圖框?qū)捀吖潭ū壤?/p>
? ? ? ????? fixedNumber: [3, 1], // 截圖框的寬高比例
? ? ? ? ????full: true, // 是否輸出原圖比例的截圖
? ? ? ? ????canMoveBox: false, // 截圖框能否拖動(dòng)
? ? ? ????? original: false, // 上傳圖片按照原始比例渲染
? ? ? ? ????centerBox: false, // 截圖框是否被限制在圖片里面
? ? ? ? ????infoTrue: true, // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?/p>
? ? ? ? ????canMove:true,
? ? ? ? fileinfo:{}
? ? ? },
? ? }
? }
上傳圖片部分：
// 文件上傳el-upload需要用到on-change方法其他的方法回觸發(fā)自動(dòng)上傳
? ? selectImgFn(file) {
? ? ? this.fileName = file.name;
? ? ? if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
? ? ? ? this.$message({
? ? ? ? ? message: '圖片類型要求：jpeg、jpg、png',
? ? ? ? ? type: "error"
? ? ? ? });
? ? ? ? return false
? ? ? }
? ? 在插件上展示圖片
? ? ? this.option.img = URL.createObjectURL(file.raw);
? ? },
裁剪完之后上傳
? ? finish(){
? ? ? this.$refs.cropper.getCropBlob((data) => {
? ? ? ? // let file = new File([data], this.fileName, {type: this.fileName.split('.')[1]});
? ? ? ? // data轉(zhuǎn)換為bolb之后是沒有name的,后段接收到file之后需要獲取到文件的名稱；
? ? ? ? data.name=this.fileName;
? ? ? ? console.log('data',data);
? ? ? ? upload(this.actionsUlr,data).then(res=>{
? ? ? ? ? if(res.Data == 200){
? ? ? ? ? ? this.newImgUrl = res.Data;
? ? ? ? ? }
? ? ? ? });
? ? ? });
? ? }
上傳圖片js封裝
import axios from 'axios'
export function upload(api, file) {
? var data = new FormData()
? data.append('file', file)
? return axios.post(api, data,)
}
備注：彈窗這里沒有添加，自己用el-dialog就可以了
頁面效果：
