更新一下内容，代码已更新。特定情况下出现了一个小bug，页面中一个input多次上传同一个文件，上传前需要先清空input的value，否则@change事件将不会触发
结构，样式可以自己修改
<input type="file" @change="addimg($event)">
在公用函数commonfn.js文件里面添加一个方法
let fileBaseurl = 'http://xxxxxxxxxxxx/upImages' //你的图片上传地址import axios from 'axios';export function uploadimg (event) {// 传参是$eventlet img1 = event.target.files[0];let type = img1.type;let size = img1.size;let typelist = 'image/jpeg, image/png, image/jpg'if (typelist.indexOf(type) === -1) {alert('支持上传的图片格式不对')return false; }if (size>5242880) {alert('上传图片不能大于5m')return false; } let form = new FormData();form.append('file',img1);event.target.value = '' // 一个inputfile多次上传前清空return axios.post(fileBaseurl, form, {headers:{'Content-Type':'multipart/form-data'},withCredentials:true}).then(res => {let result = res.datareturn Promise.resolve(result)}).catch(res => {return Promise.reject(res.data)})}
调用
//script 引入import {uploadimg } from '@/xxxxxxx/commonfn.js' // 按自己的文件位置引入// methods里面执行addimg (el) {uploadimg(el).then(res => {console.log(res) //返回值}).catch(res => {alert('上传失败')})},
