一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情。
整体样式
项目前情见另一篇文章:在vue项目中使用vue.draggable实现拖拽功能。
后台整体采用elementUI,上传商品的时候需要上传商品图片,但是上传的图像千奇百怪。总不能要求用户必须上传大小一样的图片。为了在小程序端展示的比较友好,只能在上传的时候进行裁剪,就找到了vue-cropper。
vue3中使用
<style type="text/css" src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/index.css"></style>
<script src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js"></script>
在js或者vue文件里声明组件
app.component("vue-cropper", window["vue-cropper"].VueCropper);
在项目中使用
<vue-cropper
ref="cropper"
:img="data"
:output-size="1"
:output-type="png"
:info="true"
:full="false"
:fixed="fixed"
:fixed-number="[16, 9]"
:can-move="true"
:can-move-box="true"
:fixed-box="true"
:original="false"
:auto-crop="true"
:auto-crop-width="160"
:auto-crop-height="100"
:center-box="false">
</vue-cropper>
一些比较常用的属性
- :img 动态绑定图片数据
- output-size 裁剪生成图片质量(0.1~1)
- output-type 裁剪生成图片的样式
- full 是否输出原图比例的截图
- fixed-number 截图框宽高比
- can-move 上传图片是否可以移动
- can-move-box 截图框是否可以拖动
将图片上传到云数据库中
前面的步骤跟着文档多看多做,一定能做出来。
接下来,因为我使用的是微信云开发,所以需要把图片上传到云数据库中。上传云数据库和上传云存储明天再分享。今天只解决上传图片的问题。
图片裁剪完成后不能向文字一样直接调用接口上传,图片需要转换成base64或者是blob格式才能上传到数据库
let reader = new FileReader();
reader.onload = (e) => {
if (typeof e.target.result === "object") {
// 把Array Buffer转化为blob 如果是base64不需要
this.data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
this.data = e.target.result;
}
console.log("data", this.data);
};
reader.readAsArrayBuffer(file);
这样就能将商品图片上传到云数据库中,使用的时候只需要src即可