vue 上传图片函数封装 直接调用

结构，样式可以自己修改

<input type="file" @change="addimg($event)">

在公用函数commonfn.js文件里面添加一个方法

let fileBaseurl = 'http://xxxxxxxxxxxx/upImages' //你的图片上传地址 import axios from 'axios'; export function uploadimg (event) { // 传参是$event let 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); return axios.post(fileBaseurl, form, { headers:{'Content-Type':'multipart/form-data'}, withCredentials:true }).then(res => { let result = res.data return 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('上传失败') }) },

返回结果展示,这个比较简单应该易懂。over