裁剪图片并将图片上传到到阿里云oss（element-ui上传组件结合图片裁剪插件VueCropper）

摘自本人项目，供自己查阅。如有需求请联系我共同探讨。

<template>
  <div>
    <headTitle title="行业洞察文章管理" />
    <div class="content">
      <el-form ref="form" :model="articleData" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="articleData.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <Editor />
        </el-form-item>
        <el-form-item label="文章排序">
          <el-select v-model="articleData.sort" placeholder="请选择活动区域">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
            <el-option label="6" value="6"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="8" value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章摘要" v-if="parseInt(articleData.sort)<=5">
          <el-input v-model="articleData.description" placeholder="请输入文章摘要"></el-input>
        </el-form-item>
        <el-form-item label="文章类型">
          <el-select v-model="articleData.categoryId" placeholder="请选择活动区域">
            <el-option
              v-for="(item,index) in categoryData"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章配图">
          <!-- <button class="blue upload-img" @click.prevent="openUploadImgBox">上传图片</button> -->
          <el-upload
            class="upload"
            accept="image/png, image/jpg, image/jpeg"
            action
            :on-change="getFile"
          >
            <button class="blue upload-img" v-if="articleData.urls===''">上传图片</button>
            <div class="imgBox" v-else>
              <img class="imgItem" :src="articleData.urls" alt />
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <button class="white" @click.prevent="goBack">返回</button>
      <button class="blue">保存</button>
      <button class="blue">发布</button>
    </div>
    <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="50%">
      <div style="width:900px;height:400px;">
        <vueCropper
          autoCrop
          :img="cropperImgUrl"
          ref="cropper"
          centerBox
          fixed
          :fixedNumber="[12,5]"
        ></vueCropper>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返回上一级</el-button>
        <el-button type="primary" @click="uploadImg">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import headTitle from "@/components/AdminHeader";
import Editor from "@/components/Editor";
import { VueCropper } from "vue-cropper"; //图片裁剪插件
import {
  rqGetArticleCategoryList,
  rqAddArticle,
  rqEditArticle
} from "@/api/request";
export default {
  data() {
    return {
      dialogVisible: false, //裁剪对话框
      isAdd: true, //是否是添加页
      id: "", //编辑页，文章id
      categoryData: [], //所有文章分类数据
      cropperImgUrl: "",
      articleData: {
        articleContent: "", //文章内容
        categoryId: "", //分类id
        description: "", // 文章摘要
        sort: "1", //文章排序
        status: "", // 0:发布  2：保存
        title: "", //文章标题
        urls: "" //图片链接地址，用逗号拼接
      }
    };
  },
  created() {
    rqGetArticleCategoryList().then(res => {
      //获取所有文章分类
      //   console.log(res);
      if (res.data.code === "200") {
        this.$data.categoryData = res.data.data;
      }
    });
  },
  components: {
    headTitle,
    Editor,
    VueCropper
  },
  methods: {
    goBack() {
      //返回上一页
      this.$router.go(-1);
    },
    openUploadImgBox() {
      //打开裁剪图片对话框
      this.$data.dialogVisible = true;
    },
    uploadImg() {
      //上传裁剪后的图片
      this.$refs.cropper.getCropBlob(data => {
        // 获取截图的blob数据
        // console.log(data);
        let aTime = new Date().getTime(); //取时间戳，给文件命名
        let fileName = aTime + "." + data.type.substr(6); //给文件名加后缀
        let file = new window.File([data], fileName, { type: data.type }); //blob转file
        this.upLoad(file); //上传操作
      });
    },
    async upLoad(file) {
      //上传
      let OSS = require("ali-oss");
      let client = new OSS({
        region: "oss-cn-shanghai",
        accessKeyId: "你的keyId",
        accessKeySecret: "你的KeySecret",
        bucket: "tulu"
      });
      client
        .put("tulu/articleImg/" + file.name, file)
        .then(result => {
          const url = result.url;
          this.articleData.urls = url;
          this.$data.dialogVisible = false; //关闭裁剪框
          this.$message({
            type: "success",
            message: "上传成功！"
          });
          console.log(this.articleData.urls);
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "error",
            message: "上传失败" + err.message
          });
        });
    },
    getFile(file, fileList) {
      //获取上传的图片base-64格式
      this.getBase64(file.raw).then(res => {
        // console.log(res);
        this.$data.dialogVisible = true;
        this.$data.cropperImgUrl = res;
      });
    },
    getBase64(file) {
      //base-64格式转换方法
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    }
  }
};
</script>