更新一下内容,代码已更新。特定情况下出现了一个小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) {
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 = ''
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)
})
}
调用
import { uploadimg } from '@/xxxxxxx/commonfn.js'
addimg (el) {
uploadimg(el).then(res => {
console.log(res)
}).catch(res => {
alert('上传失败')
})
},
返回结果展示,这个比较简单应该易懂。over