获取文件ref url +裁剪头像

本文介绍了如何在Vue应用中通过ref获取文件输入并操作头像,包括使用`<van-cell>`展示头像、利用`cropperjs`进行图片裁剪,以及如何将裁剪后的图片发送到API并更新用户头像。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

获取文件

<van-cell title="头像" is-link>
  <van-image
    class="avatar"
    fit="cover"
    round
    :src="user.photo"
    @click="$refs.inputRef.click()"
  />
</van-cell>
<input type="file" hidden ref="inputRef" @change="iptChange"/>

//ref获取input元素 change事件用于获取文件

iptChange(){
  const file =this.$refs.inputRef.files[0]
  //console.dir(file);
  const imgUrl=URL.createObjectURL(file)
  //console.log(imgUrl);
}

//这里URL是windows里的方法 所以前面不用加windows

使用ref获取组件的方法

1、父组件引入子组件,并在子组件中添加ref属性

    <AddDept
      ref="DialogDeprts"
      :tree-node="node"
      :show-dialog.sync="showDialog"
      @getDeprts="getDepartments"
    />

2、子组件写方法

    async getDetailDepartment() {
      this.formData = await getDetailDepartment(this.treeNode.id)
    },

3、父组件方法中通过ref引入子组件方法

this.$refs.DialogDeprts.getDetailDepartment(node.id)

头像裁剪

yarn add cropperjs

引入css和js

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

 在mounted里写入代码

//获取元素
const image = this.$refs.img
//创建裁剪工具对象
//const cropper = new Cropper(image, {
//    aspectRatio: 16 / 9,
//    crop (event) {
//        console.log(event.detail.x)
//        console.log(event.detail.y)
//        console.log(event.detail.width)
//        console.log(event.detail.height)
//        console.log(event.detail.rotate)
//        console.log(event.detail.scaleX)
//        console.log(event.detail.scaleY)
//    }
//})
this.cropper = new Cropper(image, {
      viewMode: 1, // 只能在裁剪的图片范围内移动
      dragMode: 'move', // 画布和图片都可以移动
      aspectRatio: 1, // 裁剪区默认正方形
      autoCropArea: 1, // 自动调整裁剪图片
      cropBoxMovable: false, // 禁止裁剪区移动
      cropBoxResizable: false, // 禁止裁剪区缩放
      background: false // 关闭默认背景
})

 在方法里获取裁剪区域

this.cropper.getCroppedCanvas().toBlob(blob => {
        console.log(blob)
 })

设置api请求

传递数据

// 创建一个空formdata实例:用来传递文件数据
let fd = new FormData();
fd.append("photo", blob);
// 打印fd
// fd.forEach((v,k)=>{
//     console.log(k,v);
// })
let res = await updateUserAvatar(fd);//请求
// console.log(res.data.data.photo);
this.$emit("close");
this.$emit("update:img", res.data.data.photo);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值