裁剪圖片並將圖片上傳到到阿里雲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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章