前台nuxt+后台eggjs实现el-upload上传并且vue-cropper剪裁输出到阿里云oss

weixin_43917812

已于 2022-06-25 22:53:45 修改

阅读量546

点赞数

文章标签：前端 javascript vue.js elementui

于 2022-06-25 22:52:23 首次发布

本文链接：https://blog.csdn.net/weixin_43917812/article/details/125465118

版权

该博客详细介绍了如何在Nuxt.js前端使用vue-cropper组件进行图片剪裁，并结合el-upload组件上传图片。接着，通过EggJS服务端接收数据并推送到阿里云OSS。博客内容包括vue-cropper属性、el-upload与cropper的联合使用、服务端数据处理和阿里云OSS配置等。

摘要由CSDN通过智能技术生成

nuxt使用vue-cropper

下载vue-cropper；

npm install vue-cropper

nuxt.config.js配置载入vue-cropper全局组件

module.exports = {
   
  plugins: [
    '@/plugins/element-ui',
    {
   
      src: '@/plugins/axios',
      ssr: true
    },
    '~/plugins/router.js',
    {
    src: '~/plugins/cropper.js', ssr: false }
  ],
}

实现plugins/cropper.js，剪裁组件是纯前端的操作，所以不需要ssr，也没有必要加载到服务端渲染

import Vue from 'vue';
import vueCropper from 'vue-cropper';
if(process.browser){
   
    Vue.use(vueCropper);
}

vue-cropper属性介绍

vue-cropper剪裁组件的属性介绍；

属性名称	描述	可选值
img	裁剪图片的地址	url地址，支持blob和base64
output-size	裁剪生成图片的质量	默认值1.可选值0~1之间
output-type	裁剪生成图片的格式默认jpeg	jpeg, png, webp
info	裁剪框的大小信息	默认是true，可选true和false
canScale	图片是否允许滚轮缩放	默认是true，可选true和false
can-move	上传图片是否可以移动	默认是true，可选true和false
can-move-box	截图框能否拖动	默认是true，可选true和false
fixed-box	固定截图框大小	不允许改变
auto-crop	是否默认生成截图框	默认是false，可选true和false
auto-crop-width	默认生成截图框宽度	默认是容器的 80%
auto-crop-height	默认生成截图框高度	默认容器的 80%
center-box	截图框是否被限制在图片里面	默认是false，可选true和false
high	是否按照设备的dpr 输出等比例图片	默认是true，可选true和false
info-true	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	默认是false，可选true和false
enlarge	图片根据截图框输出比例倍数	默认是1，可选0~max
fixed	是否开启截图框宽高固定比例	默认是false，可选true和false
fixed-number	截图框的宽高比例	默认[1,1]，可选宽度和高度

实现cropper剪裁组件的封装

剪裁组件的封装；

el-upload组件和cropper组件的联合使用

el-upload组件和cropper组件；

<template>
  <div>
    <!-- 注意：必须关闭自动上传属性 auto-upload -->
    <el-upload
      :http-request="Upload"
      name="files"
      :multiple="false"
      list-type="picture-card"
      :limit="12"
      :before-upload="beforeAvatarUpload"
      ref="fileUpload"
      :auto-upload="false"
      :on-change="selectChange"
      action="aaa"
      class="cropper-upload-box"
    >
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
 
    <cropper
      v-if="showCropper"
      :dialog-visible