前端处理图片文件的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端处理图片文件的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1.上传图片的组件

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

 <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`构造函数

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构造函数声明的对象，打印该对象如下：

前端处理图片文件的方法,javascript