vue项目中原生input上传图片

r囧r小猫 2022-10-16 00:49 176阅读 0赞

<input type="file" class="upload" @change="addImg" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg"	/>
    addImg(e){
    	console.log(e)
    	let file = e.target.files[0];
    	console.log(file)
    	this.uploadImg(file)
    },
    //上传图片
    uploadImg(img) {
    		var trave = "trave"
    		let config = {
    			headers: {
    				'Content-Type': 'multipart/form-data',
    				'contentType': "application/json"
    			},
    			
    		}
    
    		//我这边的项目中formData中传的东西较多，formData是看后台让传什么东西，你就传什么
    		var formData = new FormData()
    		formData.append('userId','') 用户的id
    		formData.append('projectName','') //项目名
    		formData.append('folderName','imgs/trave') //标识要给他传到那个文件夹中
    		formData.append('waterTypes','0')
    		formData.append('businessType', trave)//这个是我项目中必传的
    		**formData.append('file', img)** //最重要的就是这一步，要给后台传的文件
    		formData.append('expirationDate','0')
    		formData.append('source', 'wx_gr')
    		axios.post('这里写的是路径', formData, config).then(res => {
    			console.log(res)
    		}).catch(err => {
    			console.log(err)
    		})
    	}

转载地址：[https://blog.csdn.net/weixin\_44889798/article/details/106735719][https_blog.csdn.net_weixin_44889798_article_details_106735719]

[https_blog.csdn.net_weixin_44889798_article_details_106735719]: https://blog.csdn.net/weixin_44889798/article/details/106735719

发表评论取消回复

表情：

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

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

相关阅读

相关利用input图片上传

利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码 <!DOCTYPE html> <html>

迈不过友情╰/ 2023年07月19日 12:27/ 0 赞/ 16 阅读

相关原生上传图片

/ 上传头像 / var txNode = document.querySelector(".tx");//图片 var wj = docume

╰半夏微凉°/ 2022年12月13日 15:28/ 0 赞/ 183 阅读

相关阿里 OSS图片上传 —— 原生JS中使用

> 前言这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档. 然而发现官方文档又臭又长,于是自己捣

短命女/ 2022年12月08日 15:57/ 0 赞/ 603 阅读

相关原生js图片上传 jquery

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

野性酷女/ 2022年11月10日 03:46/ 0 赞/ 220 阅读

相关 vue项目中原生input上传图片

<input type="file" class="upload" @change="addImg" ref="inputer" accept="image/png,i

r囧r小猫/ 2022年10月16日 00:49/ 0 赞/ 177 阅读

相关 Vue中使用input简易的上传图片

![在这里插入图片描述][20210618111438568.png] <div class="boximg"> <div cla

偏执的太偏执、/ 2022年10月07日 12:59/ 0 赞/ 252 阅读

相关在vue项目中使用MavonEditor，实现上传图片！

啦啦啦啦啦！我又来更新了！![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDYvMjAxOTA2M

逃离我推掉我的手/ 2022年10月02日 12:50/ 0 赞/ 516 阅读

相关 input上传图片

<div class="content-logo" @click="modifyLogo"> <el-tooltip class="item" effect

古城微笑少年丶/ 2022年09月09日 09:55/ 0 赞/ 134 阅读

相关 vue 上传图片

vue 用 file 的 change获取到上传文件的基本信息 <input type="file" name="file" class="upload__input

落日映苍穹つ/ 2022年06月02日 23:05/ 0 赞/ 216 阅读

相关 vue中 input 上传文件

<template> <div class="app-container"> <el-form id="box2" :label-

矫情吗；*/ 2021年11月11日 10:50/ 0 赞/ 961 阅读