安装:npm install vue-cropper
<el-upload
ref="upload"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"
action=""
:auto-upload="false" :show-file-list="false" :on-change='changeUpload'
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- vueCropper 剪裁图片实现-->
<el-dialog title="图片剪裁" :visible.sync="cropperDialogVisible" width="35%">
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<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"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="cropperDialogVisible = false" >取 消</el-button>
<el-button size="mini" type="primary" @click="finish" :loading="loading" >确认</el-button>
</div>
</el-dialog>
import { VueCropper } from 'vue-cropper'
data(){
return{
imageUrl: '',
fileList:[],
cropperDialogVisible: false,
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
// autoCropWidth: 300, // 默认生成截图框宽度
// autoCropHeight: 200, // 默认生成截图框高度
fixedBox: false, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1,1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
}
}
beforeAvatarUpload(file) {
file.url = URL.createObjectURL(file);
this.fileList.push(file)
return false;
},
handleRemove(file, fileList){
if (file && file.status==="success") {
//移除方法 element的upload组件在before-upload之后return false之后自动触发了before-remove以及后面on-remove方法
this.fileList = fileList
}
},
// 上传按钮 限制图片大小
changeUpload(file, fileList) {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上传文件大小不能超过 5MB!')
return false
}
this.fileinfo = file
this.imageUrl = URL.createObjectURL(file.raw);
// 上传成功后将图片地址赋值给裁剪框显示图片
this.$nextTick(() => {
this.option.img = this.imageUrl
this.cropperDialogVisible = true
})
file.url = URL.createObjectURL(file.raw);
this.fileList=[];
this.fileList.push(file.raw)
return false;
},
// 点击裁剪,这一步是可以拿到处理后的地址
finish() {
this.cropperDialogVisible = false
this.$refs.cropper.getCropData(data => {
// do something
this.imageUrl=data
})
this.$refs.cropper.getCropBlob((data) => {
// var fileName = 'goods' + this.fileinfo.uid
// console.log(data);
// this.fileList.push(data)
let name=this.fileList[0].name;
let type = this.fileList[0].type;
this.fileList=[];
var myFile = new File([data], name,{type: type});
this.fileList[0]=myFile;
// this.picsList.push(result.url)
//上传阿里云服务器
/* client().put(fileName, data).then(result => {
this.cropperDialogVisible = false
this.picsList.push(result.url)
}).catch(err => {
console.log(err)
this.loading = false
}) */
})
console.log("finish",this.cropperDialogVisible);
}
提交:
let newForm = new FormData();
for (var i = 0; i < this.fileList.length; i++) {
newForm.append("userPhoto",this.fileList[i])
}
this.$refs.upload.submit();