【vue+el-upload+vue-cropper】vue图片上传,vue-cropper图片裁剪后上传

一. 先看效果演示

二. 图片上传

用的el-upload加el-image组件
html部分

<el-dialog>
...//无关代码已省略
	<div v-for="item in imgArr" :key="item.index">
      <span>{{ item.name }}</span>
      <el-upload action="#" list-type="picture-card" :on-change="onChange.bind(null, item.index)" :auto-upload="false" :file-list="item.fileList" :class="{ hide: item.hideUpload }">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <el-image class="el-upload-list__item-thumbnail" :src="item.aimgSrc" alt="" :onerror="defaultImg" :preview-src-list="item.fileList"></el-image>
            <span class="el-upload-list__item-actions">
            	// 预览按钮
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              	// 删除按钮
              <span class="el-upload-list__item-delete" @click="handleRemove(file, item.index)">
                <i class="el-icon-delete"></i>
              </span>
              	// 裁剪按钮
              <span v-if="item.index == 6" class="el-upload-list__item-delete" @click="beforeCrop(file)">
                <i class="el-icon-scissors"></i>
              </span>
            </span>
          </div>
        </el-upload>
	</div>
</el-dialog>
....

注释:
el-upload
:on-change=“onChange.bind(null, item.index)” 不加.bind会报错,
:auto-upload=“false” 表示不自动上传,也就是手动上传
:file-list=“item.fileList” 上传的图片列表,数组对象格式[{url:xxxx}]
:class=“{ hide: item.hideUpload }” 到el-image使用,上传完后影藏那个加号和虚线框

el-image
:οnerrοr=“defaultImg” 图片加载失败,报错时候的默认图片.
:preview-src-list=“item.fileList” 预览的图片列表,同:file-list=“item.fileList”

预览,删除,裁剪,三个按钮,目前功能与预览无关,预览功能有空再另写吧

js部分

      imgArr: [
        // aimgFile调接口, aimgSrc回显, hideUpload影藏加号, fileList预览大图
        { index: 0, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 1, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 2, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 3, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 4, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 5, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
        { index: 6, name: '图片A：', aimgFile: '', aimgSrc: '', hideUpload: false, fileList: [] },
      ],
      files :'', //裁剪图片的标记
      
    // 上传图片 index 图片下标 file图片内容 flag裁剪图片的标记
    onChange(index, file, flag) {
      this.files = file.raw
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type == 'image/png'
      const isLt2M = file.raw.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        this.handleRemove(file.raw, index)
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        this.handleRemove(file.raw, index)
        return
      }
      // 上传图片
      const fileData = new FormData()
      fileData.append('imgFile', file.raw)
      fileData.append('imgType', 1)
      // 调接口
      doctorAccessoryUpload(fileData).then((res) => {
        if (res) {
          this.imgArr[index].hideUpload = true
          this.imgArr[index].aimgSrc = file.url
          this.imgArr[index].aimgFile = res.result
          // 裁剪后上传
          if (flag === 1) this.imgArr[index].fileList = [{ url: file.url }]
        } else {
          this.handleRemove(file.raw, index)
        }
      })
    },
    // 删除上传图片
    handleRemove(file, index) {
      this.imgArr[index].aimgSrc = ''
      this.imgArr[index].aimgFile = ''
      this.imgArr[index].fileList = []
      this.imgArr[index].hideUpload = false
    },

三. 裁剪图片

下载vueCropper插件

	npm i vue-cropper --save  // 我的版本是^0.6.4

另起一个dialog

      <!-- 图片裁剪 -->
      <el-dialog title="图片裁剪" :visible.sync="cropDialog" width="40%" :modal="true" :close-on-click-modal="false" center @close="cropCancles" v-dialogDrag>
        <div class="cropBox">
          <template>
            <div>
              <vueCropper
                @mouseenter.native="enter"
                @mouseleave.native="leave"
                ref="cropper"
                :img="option.uploadImg"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
              ></vueCropper>
            </div>
          </template>
          <div>
            <img :src="cropImg" alt="" />
          </div>
        </div>
        <div slot="footer">
          <el-button @click="cropCancles">取 消</el-button>
          <el-button type="primary" @click="cropConfirm">裁剪图片</el-button>
        </div>
      </el-dialog>
      <script>
      import { VueCropper } from 'vue-cropper'
      export default {
  		components: { VueCropper },
  		data() {
		    return {
	          cropDialog: false,
		      option: {
		        uploadImg: '', // 原图地址
		        info: true, // 裁剪框的大小信息
		        outputSize: 1, // 裁剪生成图片的质量
		        outputType: 'jpeg', // 裁剪生成图片的格式
		        canScale: true, // 图片是否允许滚轮缩放
		        autoCrop: true, // 是否默认生成截图框
		        fixedBox: true, // 固定截图框大小 不允许改变
		        fixed: true, // 是否开启截图框宽高固定比例
		        fixedNumber: [3, 4], // 截图框的宽高比例
		        full: false, // 是否输出原图比例的截图
		        canMove: true, //是否可以移动原图
		        canMoveBox: true, // 截图框能否拖动
		        original: false, // 上传图片按照原始比例渲染
		        centerBox: true, // 截图框是否被限制在图片里面
		        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
		      },
		      cropImg: require('../../public/img/default.png'),
			}
		}
		  //开始裁剪
	    enter() {
	      if (this.option.uploadImg == '') {
	        return
	      }
	      this.$refs.cropper.startCrop()
	    },
	    //停止裁剪
	    leave() {
	      this.$refs.cropper.stopCrop()
	      this.$refs.cropper.getCropData((data) => {
	        this.cropImg = data
	      })
	    },
	    // 裁剪前
	    beforeCrop(file) {
	      this.option.uploadImg = file.url
	      this.cropDialog = true
	      setTimeout(() => {
	        this.$refs.cropper.getCropData((data) => {
	          this.cropImg = data
	        })
	      }, 500)
	    },
	    // 确认裁剪
	    cropConfirm() {
	      //获取截图的base64格式数据
	      this.$refs.cropper.getCropData((data) => {
	        this.cropImg = data
	        this.handleRemove(this.files, this.imgArr.length - 1)
	        this.cropCancles()
	        setTimeout(() => {
	          this.onChange(this.imgArr.length - 1, { raw: this.dataURLtoFile(data, 'Default.jpg'), url: data }, 1)
	        }, 1000)
	      })
	    },
	    // 取消裁剪
	    cropCancles() {
	      this.cropDialog = false
	      this.option.uploadImg = ''
	      this.cropImg = require('../../public/img/default.png')
	    },
	    // base64转file
	    dataURLtoFile(dataurl, filename) {
	      let arr = dataurl.split(',')
	      let mime = arr[0].match(/:(.*?);/)[1]
	      let bstr = atob(arr[1])
	      let n = bstr.length
	      let u8arr = new Uint8Array(n)
	      while (n--) {
	        u8arr[n] = bstr.charCodeAt(n)
	      }
	      return new File([u8arr], filename, { type: mime })
	    },
	  }
      </script>

ok 结束了,记录一下