完美实现前端图片上传组件+富文本编辑器

1、ImageCropper、PanThumb组件完美实现前端图片上传（比饿了么组件更美观）

  <!-- 讲师头像 -->
<template>
  <el-form-item label="讲师头像">
      <!-- 头衔缩略图 -->
      <pan-thumb :image="eduTeacher.avatar"/>
      <!-- 文件上传按钮 -->
      <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
      </el-button>
      <!--
  v-show：是否显示上传组件
  :key：类似于id，如果一个页面多个图片上传控件，可以做区分
  :url：后台上传的url地址
  @close：关闭上传组件
  @crop-upload-success：上传成功后的回调 -->
      <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/eduoss/fileoss'"  //oss图片上传的controller地址
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
  </el-form-item>
</template>

script>
import teacher from '@/api/edu/teacher'

import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    components: {ImageCropper,PanThumb},
    data() {
      return {
      
        imagecropperShow: false,  //上传弹框的组件是否显示
        imagecropperKey: 0,  //上传组件key值,组件的唯一标识
        BASE_API: process.env.BASE_API,      //获取dev.env.js中BASE_API：http://localhost:9001
    
      //关闭上传弹框的方法
      close(){
        this.imagecropperShow = false;
        this.imagecropperKey = this.imagecropperKey + 1 //让组件关闭时做一次初始化，避免重复显示bug
      },
      //上传成功的方法
      cropSuccess(data){
          //上传之后接口返回地址
          this.eduTeacher.avatar = data.url;
          this.imagecropperShow = false;
          this.imagecropperKey = this.imagecropperKey + 1 //上传图片成功时做一次初始化，避免重复显示bug
      }
    }
  }
</script>

实现效果图：

ImageCropper、PanThumb组件下载地址：https://gitee.com/csu_training_project/upload/raw/master/tools.zip

2、Element-UI的图片上传

<template>
   <el-form-item label="课程封面">
            <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="BASE_API+'/eduoss/fileoss'"
                class="avatar-uploader">
                <img :src="courseInfo.cover">
            </el-upload>
	</el-form-item>
</template>

<script>
      // 上传之前（一般用来设置对文件格式或者文件大小的限制等）
      beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格 式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
      },
      //上传成功
      handleAvatarSuccess(res,file){
         this.courseInfo.cover = res.data.url
      }
</script>

3、富文本编辑器

（1）在components文件夹中放入Tinymce组件：

（2）在static文件夹下放入tinymce组件的js等静态文件：

（3）在webpack.dev.conf.js中添加配置信息：

（4）在index.html中引入组件的js文件：

（5）引入、声明组件，最后使用组件：

<!-- 课程简介 TODO -->
<el-form-item label="课程简介">
    <!-- 使用富文本编辑器 -->
    <tinymce :height="300" v-model="courseInfo.description" placeholder="课程简介..."/>
    <!-- <el-input v-model="courseInfo.description" placeholder=" "/> -->
</el-form-item>

最终效果:

富文本编辑器下载路径：https://gitee.com/csu_training_project/upload/raw/master/富文本编辑器组件.zip

---

欢迎关注公众号Java技术大本营，会不定期分享BAT面试资料等福利。

---