<input type="file" @change="fileChange($event)"
style="display: none"
multiple="multiple"
accept="image/gif,image/jpeg,image/jpg,image/png">
<img :src="avatar" alt="">
data () {
return {
avatar: ''
}
},
// 本地预览和上传
fileChange (e) {
let file = e.target.files[0];
if(file) {
this.file = file
console.log(this.file)
let reader = new FileReader()
let that = this
reader.readAsDataURL(file)
reader.onload= function(e){
// 这里的this 指向reader
that.avatar = e.target.result
}
}
let form = new FormData()
form.set('file', file)
form.set('token', this.token)
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
axios.post(`${process.env.API_HOST}/qianbomall/app/reg/uploadObject`, form, config).then((res) => {
console.log(res)
})
},
<!--多图上传的话-->
this.fileArr.forEach((file, i)=> {
formData.append('file'+ i, file)
})
直接获取整个form 并转成foramData(没有试过)
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
上传视频的预览
const file = this.$refs.input.files[0]
this.videoSrc = this.getFileURL(file)
getFileURL (file) {
let getURL = null
if (window.createObjectURL !== undefined) {
getURL = window.createObjectURL(file)
} else if (window.URL !== undefined) {
getURL = window.URL.createObjectURL(file)
} else if (window.webkitURL !== undefined) {
getURL = window.webkitURL.createObjectURL(file)
}
return getURL
}
