前端处理图片文件的方法

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

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如下:

相关推荐
@PHARAOH20 分钟前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
专注前端30年2 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
专注前端30年3 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js3 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ4 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办5 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao5 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
高台树色5 小时前
终于记住Javascript垃圾回收机制
javascript
举个栗子dhy5 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
sorryhc5 小时前
开源的SSR框架都是怎么实现的?
前端·javascript·架构