<input
id="file"
type="file"
ref="fileData"
style="display:none;"
@change="changeFile()"
/>
<img :src="avatar" class="img-style" @click="fileOpen()" />
点击头像,切换图片
fileOpen () {
document.getElementById('file').click()
},
changeFile () {
let self = this
var file = this.$refs.fileData.files[0]
this.file_name = file.name
if (/^image\//.test(file.type)) {
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = async function () {
self.avatar = this.result
self.upload(this.result)
self.uploadBacend(this.result)
}
}
},
// 图片直接传给后端(图片转为文件格式)
uploadBacend (imgData) {
let bytes = window.atob(imgData.split(',')[1])
let arrayBuffer = new ArrayBuffer(bytes.length)
let intArray = new Uint8Array(arrayBuffer)
for (let i = 0; i < bytes.length; i++) {
intArray[i] = bytes.charCodeAt(i)
}
let blob = new Blob([intArray], {
type: 'application/json'
})
// 这里传参形式为form表单(参照后端的传参要求)
let formData = new FormData()
let fileOfBlob = new File([blob], new Date()+'.jpg')
formData.append('camera', this.camera)
formData.append('file', fileOfBlob)
this.axios.post('/model/api/v1/predict2', formData, {
headers: {
Authorization: this.token
}
}).then(res => {
console.log('res', res)
})
},
// 上传图片到服务器
upload (imgData) {
this.axios.post('/admin/api/v2/personaluser', {
file_name: this.file_name,
key: this.key
}, { headers: { token: this.token } }).then(async res => {
let uploadlink = res.data.data.upload_url //获取上传链接
sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.user))
if (res.data) {
let bytes = window.atob(imgData.split(',')[1])
let arrayBuffer = new ArrayBuffer(bytes.length)
let intArray = new Uint8Array(arrayBuffer)
for (let i = 0; i < bytes.length; i++) {
intArray[i] = bytes.charCodeAt(i)
}
let blob = new Blob([intArray], {
type: 'application/json'
})
var files = new window.File([blob], this.file_name)
// put请求上传 上传图片到服务器
this.fetchResult = await fetch(uploadlink, {
method: 'PUT',
body: files
})
// post请求
let formData = new FormData()
formData.append('file', files)
formData.append('key', result.fields.key)
formData.append('x-amz-algorithm', result.fields['x-amz-algorithm'])
formData.append('x-amz-credential', result.fields['x-amz-credential'])
formData.append('x-amz-date', result.fields['x-amz-date'])
formData.append('policy', result.fields.policy)
formData.append('x-amz-signature', result.fields['x-amz-signature'])
let fetchResult = await fetch(link, {
method: 'POST',
body: formData
})
}
})
}
上传文件(文件和图片都行)
<v-file-input label="上传文件" v-model="file"></v-file-input>
async saveFile () {
console.log('this.file', this.file)
let i = this.file.name.lastIndexOf('.')
size = Math.round(this.file.size / 1000)
classify = this.file.name.substring(i + 1, this.file.name.length)
// post upload file
let formData = new FormData()
formData.append('file', this.file)
formData.append('key', result.fields.key)
formData.append('x-amz-algorithm', result.fields['x-amz-algorithm'])
formData.append('x-amz-credential', result.fields['x-amz-credential'])
formData.append('x-amz-date', result.fields['x-amz-date'])
formData.append('policy', result.fields.policy)
formData.append('x-amz-signature', result.fields['x-amz-signature'])
//result.url 获取到的上传链接
await fetch(result.url, {
method: 'POST',
body: formData
}).then((res) => {
return res
}).catch((err) => {
console.error('err: ', err)
return err
})
}