vue上传单张图片

﹏ヽ暗。殇╰゛Y 2022-06-07 09:08 220阅读 0赞

之前写了一个上传多张的，今天又用到上传图片，但是只需要单张上传，就把循环去掉了，也没有用插件，普通form对象。

html:

<form class="management_cent">
    					<label class="flex">
    						<div class="data_management_left">头像</div>
    						<div class="data_management_right flex">
    							<div class="flex header_img">
    								<img :src="head_img" alt="..." />
    							</div>
    							<img src="img/icon22.png" alt="..." class="arrow_img" />
    						</div>
    						<input type="file" name='pics' accept="image/*" class="hide" @change="doUpload_click" />
    					</label>
    				</form>

Js:

doUpload_click(e) {
    							// 上传图片
    							let that = this;
    							let file_val = e.target.files[0];
    							let imgFile = new FormData();
    							imgFile.append('fileType', 'IMAGE')
    							imgFile.append('file', file_val);
    							imgFile.append('filename', 'pics');
    							imgFile.append('pics', file_val);
    							axios({
    									method: 'post',
    									url: href_val + '/upload/image',
    									headers: {
    										'Authori-zation': 'Bearer ' + token
    									},
    									data: imgFile
    								})
    								.then(res => {
    									console.log("上传图片结果", res.data.data)
    									if (res.data.status == 200) {
    										that.head_img = res.data.data.url;
    										localStorage.head_img = res.data.data.url;
    									} else {
    										that.$toast(res.data.msg);
    									}
    								}).catch(function(error) {
    									that.$toast('接口错误');
    								});
    						}

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS使用AFN上传单张、多张图片

iOS在上传图片时，AFN专门封装了一个上传文件的方法，但是这里需要特别强调的是name和mineType [formData appendPartWithFileD

待我称王封你为后i/ 2023年10月17日 14:54/ 0 赞/ 148 阅读

相关 antdvue封装上传图片(单张图片上传)

<template> <div class="clearfix"> <a-upload :headers="heade

蔚落/ 2023年01月13日 06:25/ 0 赞/ 253 阅读

相关 vue实现签名和两张图片合成一张

效果就是如下了，签名的组件我用的是百度的这个组件，地址是：https://github.com/JaimeCheng/vue-esign ![在这里插入图片描述][wa

- 日理万妓/ 2022年12月27日 14:09/ 0 赞/ 425 阅读

相关 SpringBoot：上传单个图片，上传图片压缩包，读取本地磁盘图片

目录 1. 上传单个图片业务方法工具类返回结果 2. 上传图片压缩包并解压到指定目录，和用户信息匹配业务方法工具类常量 3. 读取本地磁盘图片

一时失言乱红尘/ 2022年11月27日 10:11/ 0 赞/ 197 阅读

相关 vue上传多张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWd

我会带着你远行/ 2022年06月08日 11:56/ 0 赞/ 347 阅读

相关 springmvc上传多张图片

在pom.xml中加入 <dependency> <groupId>commons-fileupload</groupId>

小咪咪/ 2022年06月07日 12:36/ 0 赞/ 262 阅读

相关 vue上传单张图片

之前写了一个上传多张的，今天又用到上传图片，但是只需要单张上传，就把循环去掉了，也没有用插件，普通form对象。 html: <form class="manage

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 09:08/ 0 赞/ 221 阅读

相关拖拽上传图片(只能上传单张)

upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

你的名字/ 2022年06月03日 10:27/ 0 赞/ 265 阅读

相关 JS—图片压缩上传（单张）

\vue+webpack环境，这里的that指到vue实例 <input type="file" name="file" accept="image/" @chang

淩亂°似流年/ 2022年04月03日 03:48/ 0 赞/ 332 阅读

相关 FileReader上传多张图片

使用Promise实现同步处理 <div> <input type="file" accept="image/" @change="setImage

客官°小女子只卖身不卖艺/ 2021年06月24日 16:10/ 0 赞/ 641 阅读