<!-- 使用 accept 属性可以限定 文件选择的格式 -->
<a class='uploadbtn'>
<img src="../../../../assets/content_icon/upload.png" alt="">
<input type="file" @change="fileChange"
accept="application/*, image/*" ref='upload' /></a>
上传文件的事件
fileChange () {
// 通过this.$refs获取或者通过dom获取文件
// this.file = document.querySelector('input[type=file]').files[0];
this.file = this.$refs.upload.files[0]
// 校验图片
this.$refs.upload.value = ''
if(this.file.size/1024 > 2048){
this.$Notice.warning({title:'该图片超过了2MB!'})
return
}
if(!this.file.type || this.file.type && !'image/jpg,image/jpeg,image/png,image/svg,image/svg+xml,image/webp,image/gif,'.includes(this.file.type)){
this.$Notice.warning({title:'图片格式不正确!'})
this.file = ''
return
}
let base64_img = new FileReader()
base64_img.readAsDataURL(this.file)
base64_img.onload = async e =>{ //e.target.result属性将包含一个`data:`URL格式的字符串(base64编码)以表示所读取文件的内容
this.modelConfig.addRow.icon = await this.uploadFile({file_name:this.file.name,file:e.target.result})
}
},
//上传到服务器返回一个图片地址
uploadFile(params){
return this.$httpRequestEntrance.httpRequestEntrance('POST', '/v1/medias',params, (res) => {
return res.path
})
},
网友评论