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

更新一下内容，代码已更新。特定情况下出现了一个小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) { // 传参是$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);
    event.target.value = '' // 一个inputfile多次上传前清空
    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