- 首先是图片的上传(结构)其中add_img函数的参数由自己决定。
<input type="file" id="idfront" @change.self='add_img($event, 0, key)'>
<progress :value="progress" max="100" v-show="showp"></progress>
- 然后来看js当中的内容要怎么写
data (){}里面的return中可以先写一个固定的默认图片路径src,等拿到返回url的时候再替换为需要的缩略图
data () {
return {
formNum: ['1'],
showp: true,
progress: '',
imgData: {accept: 'image/jpeg, image/png, image/jpg'},
src: require('../../../../assets/images/camera.png'),
info: {
imgup: ''
}
};
}
add_img (event, key, index) {
let _this = this
var files = event.target.files[0]
if (!event || !window.FileReader) return
let reader = new FileReader()
reader.readAsDataURL(files)
reader.onloadend = function () {
_this.src = this.result
}
let img1 = event.target.files[0];
let type = img1.type;
let size = img1.size;
if (this.imgData.accept.indexOf(type) === -1) {
console.log('支持上传的格式不对');
return false;
}
if (size>5242880) {
console.log('上传图片不能大于5m')
return false;
}
let form = new FormData();
form.append('file',img1);
axios.post(baseUrl,form,{
headers:{'Content-Type':'multipart/form-data'},
withCredentials:true
onUploadProgress: progressEvent => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
console.log(complete)
this.progress = complete
}
}).then(response => {
let url = response.data.data.file_url;
if (key === 0) {
this.info.imgup = url;
}
console.log('上传成功')
}).catch(error => {
console.log('失败'error)
})
}
- 基本就到这里就结束了,附加我在网上找到的进度条的兼容样式写法
progress {
width: 100%;
border-top: 1px solid #0086ff;
border-bottom: 1px solid #0086ff;
background-color:#e6e6e6;
color: #0086ff;
}
progress::-moz-progress-bar { background: #0086ff; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0086ff; }
progress ie {
display:block;
height: 100%;
background: #0064B4;
}
progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0064B4; }
- 加一张图,是别人总结的@张鑫旭
![兼容性](https://i-blog.csdnimg.cn/blog_migrate/590493a3aa9354f0ab67e4599fca38e2.png)