一起养成写作习惯！这是我参与「掘金日新计划 · 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>

一些比较常用的属性

1. :img 动态绑定图片数据
2. output-size 裁剪生成图片质量（0.1~1）
3. output-type 裁剪生成图片的样式
4. full 是否输出原图比例的截图
5. fixed-number 截图框宽高比
6. can-move 上传图片是否可以移动
7. 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即可