router回退
this.$router.go(-1)
vue引入动态图片
<img :src="require(url)" />
具体可参考:vue动态引入图片 使用require动态引入原理
报错:Error in render: “Error: Cannot find module ‘./avatar.png‘“
解决方法:图片变量不使用路径, 而使用图片的名称,require 路径使用拼接的方式,前面使用图片文件夹路径,后面拼接图片名称和后缀
const imgPath = 'avatar-01.jpg'
this.img = require('@/assets/images/'+imgPath)
参考:报错
打包成dist文件夹
npm run build
后端传二进制图片数据进行展示
// 头像选择
fileChange (e) {
// this.$refs.file.click()
var data = new FormData()
var file = this.$refs.file.files[0]
if (!file) { return }
data.append('file', file)
// 上传头像接口
axios.post('/upload', data).then(
res => {
console.log('上传头像返回值', res)
this.name = res.data.data
console.log('name:', this.name)
}
)
setTimeout(() => {
axios.get('/download', {
responseType: 'arraybuffer',
params: {
name: 'c5c2bc23-f640-4d1a-8c64-48701544c3ff.jpg'
}
}).then(
res => {
console.log('下载头像返回值', res.data)
this.avatar = 'data:image/jpeg;base64,' + this.arrayBufferToBase64(res.data)
}
)
}, 1000)
},
arrayBufferToBase64 (buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}