长春网站开发培训,网站建设流程多少钱,网络管理系统登录,新手开公司怎么找项目在项目开发过程中#xff0c;有一个需求#xff0c;需要前端对上传的图片进行处理#xff0c;以字符串的形式传给后端#xff0c;实现效果如下#xff1a;
1.上传图片的组件
在该项目中#xff0c;使用了element plus组件库 el-uploadv-model:file-listfileL…在项目开发过程中有一个需求需要前端对上传的图片进行处理以字符串的形式传给后端实现效果如下
1.上传图片的组件
在该项目中使用了element plus组件库 el-uploadv-model:file-listfileListclassupload-demoaction#multiple:auto-uploadfalse:limit1:onchangeuploadImg
imgv-ifformData.authUrl:srcformData.authUrlstylewidth: 100px; height: 100pxclassavatar/el-button v-else typeprimary上传文件/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如下
