vue 图片裁剪上传组件的实现

先看一下总体效果:

上传文件做了大小和类型的限制，在动图中无法展现出来。

使用file类型的input实现选择本地文件

但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字是无法改变的，我需要把这个上传文件的按钮改造一下。

• 方法1：使用label元素来触发一个隐藏的file类型的 input元素；（缺点：在多人开发时，可能出现重复的元素id，导致难以预料的bug）

<input type="file" id='up_file_input' v-show='false' >
<label for='up_file_input'></label>

• 方法2：或者在这个label元素的click事件函数中手动触发文件上传按钮的click事件。

<input type="file" v-show='false' ref="inputFileUp" >
<label @click='$refs.inputFileUp.click()'></label>

使用input的change事件获取选择的本地图片并进行校验

上传图片的校验规则及提示语由父组件通过 prop 传递给子组件，格式如下：

const img_valit = {
type: /^.*\.(jpg|png|jpeg)$/i, // 文件格式校验
type_error_msg: '上传头像图片只能是 jpg 或者 png 格式!',
size: 3, // 文件大小校验
size_error_msg: '上传的图片大小不能超过3MB'
}

这里需要注意: 需要在上传文件按钮的click事件中手动清空这个文件类型输入框的值，解决选择和上次相同的文件之后无法触发 change事件的问题

function fileInputClick(event) {
event.target.value = "";
}
function coverImgChange(event) {
 const file = event.target.files[0];
 // 在组件的自定义属性中定义一个变量 originalFile 来保存当前上传的文件
 this.$options._myOpt.originalFile = file;
 // 获取对文件的校验规则
 const { type, size, type_error_msg, size_error_msg } = this.img_valit;
 // 校验文件类型和文件大小
 const isJPG_PNG = type.test(file.name), isLt5M = file.size / 1024 / 1024 <= size;
 !isLt5M && this.$message.error(size_error_msg);
 !isJPG_PNG && this.$message.error(type_error_msg);
 // 文件通过校验,打开裁剪弹窗
 if (isJPG_PNG && isLt5M) {
  this.cropImgUrl = window.URL.createObjectURL(file);
  this.dialogVisible = true;
 }
}

打开弹窗进行图片裁剪

弹窗使用的 Element-UI 中的弹窗, 图片裁剪是第三方插件 vue-cropper。图片裁剪插件中的一些配置可以参考插件官方文档，下面的代码中省略了配置部分的代码。

<el-dialog :visible.sync="dialogVisible" width='800px' title="图片裁剪">
 <div class="dialog-content">
  <div class="cropper-image">
   <vue-cropper
    ref="cropper"
    :img="cropImgUrl"
    @realTime="realTime"
   ></vue-cropper>
  </div>
  <!-- 图片裁剪之后的预览 -->
  <div class="preview-wrapper">
   <div
    class="show-preview"
    :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}"
   >
    <div :style="previews.div">
     <img :src="previews.url" class="preview_img" :style="[previews.img]">
    </div>
   </div>
   <p class="preview-text">裁剪结果预览</p>
  </div>
 </div>
 <div slot="footer" class="dialog-footer">
  <button @click="dialogEsc()">取 消</button>
  <button @click="dialogSure()">确 定</button>
 </div>
</el-dialog>

向服务器发送请求上传图片

上传文件接口中，向后台发送请求的参数为 {image: 文件本身(File类型), filename: 文件名}

function realTime(data) {
this.previews = data;
}
// 裁剪弹窗中确定按钮的点击事件
function dialogSure() {
 const ajaxConfig = {
  headers: {
   "Content-Type": "multipart/form-data"
  }
 };
 // 上传图片的文件名
 let cropFileName =
  this.$options._myOpt.originalFile.name.match(/([^\/]+)(?=\.)/gi)[0] ||
  Date.now().toString();
 this.$refs.cropper.getCropBlob(blob => {
 // IE 和 Edge 不支持 File 构造函数
  let cropFile = new File(
   [blob],
   cropFileName.toString() + "." + (this.cropperConfig.outputType || "jpg"),
   { type: blob.type }
  );
  let upParams = new FormData();
  upParams.append("image", cropFile);
  upParams.append("filename", cropFile.fileName);
  axios.post(this.up_action, upParams).then(({ data }) => {
   if (data.status === 0) {
    this.coverUlr = window.URL.createObjectURL(blob);
    this.pathToParent({
     fileId: data.result.fileId,
     fileExt: data.result.fileExt
    });
   } else {
    this.coverUlr = "";
    this.pathToParent({
     fileId: "",
     fileExt: ""
    });
   }
  });
 });
 this.dialogVisible = false;
}
// 向父组件传递上传文件成功之后后台返回的数据
function pathToParent(filePath) {
 this.$emit("getFilePath", filePath);
}

以上就是vue 图片裁剪上传组件的实现的详细内容，更多关于vue 图片裁剪上传组件的资料请关注编程宝库其它相关文章！

在使用vant的picker组件时，我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性，并在onLoad方法中进行th ...