为什么用
个人中心的头像上传需要对图片进行裁剪
1、安装引入
npm install vue-cropper
在 main.js 中
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
2、使用
页面逻辑:点击修改按钮出现弹窗,再上传图片,调整图片,确定按钮上传裁剪的图片
3、我的需求
我的想法是控制用户的图片尺寸限制为 200 X 200。
用到(调整)了配置项中 以下
fixedBox 固定截图框大小 不允许改变
autoCropWidth: 200 默认生成截图框宽度
autoCropHeight: 200 默认生成截图框高度 。
4、主要代码
<!-- 头像弹层 -->
<a-modal title="修改头像" v-drag-modal :visible="visible" :confirm-loading="confirmLoading"
@ok="handleOk" ok-text="确认" cancel-text="取消" @cancel="handleCancel" width="450px">
<a-row>
<a-col :span="24" style="text-align: center;">
<div style="width: 400px;height: 350px;">
<vue-cropper 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"
:fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
:canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original"
:centerBox="option.centerBox" :infoTrue="option.infoTrue" :full="option.full"
:enlarge="option.enlarge" :mode="option.mode">
</vue-cropper>
</div>
</a-col>
<a-col :span="24" style="margin-top: 10px;text-align: center;">
<a-upload name="file" :multiple="false" :action="upload.url" :headers="upload.headers"
@change="handleUploadChange">
<a-button size="default">
<a-icon type="upload" />
上传图片
</a-button>
</a-upload>
</a-col>
</a-row>
</a-modal>
data 中配置参数
option: {
img: "",
outputSize: 1, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
canMove: true, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
full: true, // 是否输出原图比例的截图
enlarge: '1', // 图片根据截图框输出比例倍数
mode: 'contain', // 图片默认渲染方式 contain , cover, 100px, 100% auto,
},
3、我遇到的问题
提交时有两种方法获取裁剪的图片,一种是 base64 和 blob 格式。
当我将文件放到 formData 提交后台时,发现没有数据。
原来其他请求都是 json 提交的(除了get),需要对这个请求的 contentType 进行修改。
// 提交的方法
handleOk() {
this.$refs.cropper.getCropBlob(data = >{
let add = new FormData();
add.append("file", data, this.option.filename);
userHeadUpdate(add).then(res = >{
this.$message.success('修改成功');
this.visible = false
})
})
},
// 更新头像的接口 修改了类型
export function userHeadUpdate(data) {
return request({
url: '/member/user/updateHead',
headers: {
'Content-Type': 'multipart-formData'
},
method: 'post',
data: data
})
}