前端处理图片文件的方法

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

1.上传图片的组件

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

 <el-uploadv-model:file-list="fileList"class="upload-demo"action="#"multiple:auto-upload="false":limit="1":onchange="uploadImg      
><imgv-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构造函数

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