欢迎光临
我的个人博客网站

el-upload 上传 base64 图片


el-upload 上传 base64 图片

​ 🎲🎲🎲

  • el-upload 上传 base64 图片

    • 🪶 使用 el-upload 组件
    • 🪶 转换 base64 方法使用 Promise
    • 🪶 异步调用转换同步调用
  • 代码区域

    • 👻 页面组件

      <template> 	      <el-upload 						class="avatar-uploader" 						accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg"   // 可接收的文件格式 						list-type="picture"   // 图片显示样式 						:headers="headers"   // 图片上传时携带的token 						:action="url"   // 图片上传时地址 						:multiple="false"   // 是否支持多选 						:show-file-list="false"   // 是否展示文件列表 						:http-request="uploadImg"   // 自定义上传,会覆盖默认上传行为 					>             // 如果有图片则显示图片,没图片显示加号 						<img v-if="this.imgString" :src="this.imgString" class="avatar" /> 						<i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i> 				</el-upload>         // 建议分开写,否则图片数据不一定能拿到 				<el-button type="success" size="mini" @click="submitImg()">           	上传到服务器 				</el-button> </template> 
    • 👻 页面数据

      <script>   export default{     data(){       return {         // 图片上传参数 				imgString: ''         // 图片上传头部信息(如果需要token就需要携带头部信息) 				headers: { 					Authorization: "Bearer" + getToken(), 				},         // 图片上传路径 				url: Cookies.get("configsapi") + "/upload",       }     },     methods: {     	// 转换base64方法时Promise对象,必须换成同步       // 网上还有其它办法,但是尝试过后,这个方法出错的概率最低 			async uploadImg(file) {         // 这里不一定是file.file,如果使用的方法不一样,有的是file.raw         // 这里传入的应该是组件中携带的文件信息 				let base64Str = await this.getBase64(file.file);         console.log(base64Str); 				this.imgString = base64Str.split(',');         console.log(this.imgString); 			}, 			// 获取图片转base64,这里用的是Promise,所以调用方法时必须转换成同步(async,await)       // 否则上传数据时好时坏,能不能上传成功全看运气 ^_^ 			getBase64(file) { 				return new Promise(function (resolve, reject) { 					const reader = new FileReader(); 					let imgResult = ''; 					reader.readAsDataURL(file) 					reader.onload = function () { 						imgResult = reader.result; 					} 					reader.onerror = function (error) { 						reject(error); 					} 					reader.onloadend = function () { 						resolve(imgResult); 					} 				}) 			},       // 上传图片到服务器 			submitImg() {         // 此处调用后台上传接口         …… 			},     }   } </script> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » el-upload 上传 base64 图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏