获取文件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);

### 头像裁剪文件上传功能的实现 在 Vue.js 中实现头像裁剪文件上传功能可以通过 `vue-cropperjs` 或其他类似的库来完成。以下是详细的说明: #### 使用 vue-cropperjs 实现图片裁剪 `vue-cropperjs` 是一个基于 CropperJSVue 组件,它允许开发者轻松集成图片裁剪功能到 Vue 项目中[^1]。 安装依赖项: ```bash npm install vue-cropper js-base64 ``` 创建一个简单的组件用于处理图片裁剪和上传操作: ```vue <template> <div> <!-- 图片裁剪区域 --> <vue-cropper ref="cropper" :src="imageSrc" :aspect-ratio="1 / 1" preview=".preview" ></vue-cropper> <!-- 预览区 --> <div class="preview"></div> <!-- 功能按钮 --> <button @click="handleUpload">上传图片</button> <button @click="cropImage">裁剪图片</button> </div> </template> <script> import { VueCropper } from "vue-cropper"; import Base64 from "js-base64"; export default { components: { VueCropper, }, data() { return { imageSrc: "", // 原始图片路径 }; }, methods: { handleUpload(event) { const input = event.target; if (input.files && input.files[0]) { const reader = new FileReader(); reader.onload = (e) => { this.imageSrc = e.target.result; // 设置原始图片数据 }; reader.readAsDataURL(input.files[0]); } }, cropImage() { this.$refs.cropper.getCroppedCanvas().toBlob((blob) => { // 将裁剪后的图片转换为 Blob 对象以便于上传 console.log(blob); // 可在此处调用 API 进行文件上传 }); }, }, }; </script> <style scoped> .preview { width: 150px; height: 150px; border: 1px solid #ccc; } </style> ``` 上述代码展示了如何通过 `vue-cropper` 来加载、裁剪以及预览图片,并提供了一个方法将裁剪后的图片作为 Blob 数据发送给服务器。 #### 注册全局插件(可选) 如果希望在整个应用范围内使用该插件,则可以在项目的入口文件中注册它[^2]: ```javascript // 在 main.js 文件中引入插件并注册 import { createApp } from "vue"; import App from "./App.vue"; import VueCropper from "vue-cropper"; // 引入 vue-cropper 插件 const app = createApp(App); app.use(VueCropper); // 注册插件 app.mount("#app"); ``` #### 完整流程描述 当用户选择一张图片后,会触发 `handleUpload` 方法读取本地文件并将其实例化为 Data URL 显示在裁剪框内;随后点击裁剪按钮时,可以获取经过调整大小或旋转之后的结果图并通过网络请求将其传递至后台服务端保存[^3][^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值