版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
- 首先是图片的上传(结构)其中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 // 看支持不支持FileReader
let reader = new FileReader()
reader.readAsDataURL(files) // 这里是最关键的一步,转换就在这里
reader.onloadend = function () {
_this.src = this.result
}
//以上是缩略图部分代码this.result就是url,赋值给了默认的src
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;
}
//以上对图片格式的限制,imgData在return里面可见
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) //complete是一个变化的值,最大100上传完成
this.progress = complete //赋值,进度条变化,通过值或者其他事件还可以用showp使得进度条是否隐藏
}
}).then(response => {
let url = response.data.data.file_url;//上传成功的返回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; /*IE10*/
}
progress::-moz-progress-bar { background: #0086ff; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0086ff; }
/*我用的是上面这几句,下面是网站找到的我也没有试过,有兴趣的可以去试试*/
/*ie6-ie9*/
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; }
- 加一张图,是别人总结的@张鑫旭