vue上传单张图片

﹏ヽ暗。殇╰゛Y 2022-06-07 09:08 217阅读 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 条评论，217人围观）

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

相关阅读

相关 el-upload手动上传图片，上传后隐藏上传样式（el-upload上传单张图片，vue2）

实现具体步骤：1、首先，想要在项目中使用el-upload组件，同样，得保证项目中已经安装且引入了该组件，具体安装及引入可见上篇文章；el-upload下载使用。2、然后...

亦凉/ 2024年04月22日 22:28/ 0 赞/ 71 阅读

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

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

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

相关多张图片的上传

视图内容： <tr> <th><label for="">展示详情图</label> : </th>

今天药忘吃喽~/ 2023年08月17日 16:18/ 0 赞/ 57 阅读

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

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

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

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

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

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

相关 vue上传多张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWd

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

相关 springmvc上传多张图片

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

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

相关 vue上传单张图片

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

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

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

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

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

相关 FileReader上传多张图片

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

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