前端处理图片文件的方法

在项目开发过程中,有一个需求,需要前端对上传的图片进行处理,以字符串的形式传给后端,实现效果如下:

1.上传图片的组件

在该项目中,使用了element plus组件库

html 复制代码
 <el-upload
   v-model:file-list="fileList"
   class="upload-demo"
   action="#"
   multiple
   :auto-upload="false"
   :limit="1"
   :onchange="uploadImg      
>
    <img
      v-if="formData.authUrl"
      :src="formData.authUrl"
      style="width: 100px; height: 100px"
      class="avatar"
    />
    <el-button v-else type="primary">上传文件</el-button>
</el-upload>

2.在js中处理文件的方法

1.使用File构造函数
javascript 复制代码
uploadImg(e) {
    console.log(e)
    // let blob = new Blob([e.target.files[0]], { type: 'image/jpeg' })
    let file = new File([e.target.files[0]], { type: 'image/jpeg' });
    this.formData.authUrl = URL.createObjectURL(file)
    console.log(this.formData.authUrl)
},

在uploadImg方法中,定义一个对象用于接收File构造函数声明的对象,打印该对象如下:

**createObjectURL() 方法接受一个 File 对象或 Blob 对象作为参数,并返回一个可以用于展示媒体文件的 URL。**打印该url如下:

2.使用Blob构造函数

在uploadImg方法中,定义一个对象用于接收Blob构造函数声明的对象,打印该对象如下:

打印该url如下:

相关推荐
Mintopia41 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥2 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu2 小时前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的9 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络11 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码