这个问题困扰了我好久,感谢后端的同事大佬指点,终于调用接口成功了
先上代码
<el-upload class="avatar-uploader"
ref="uploadToux" //绑定ref
action //由于使用自定义的上传,所以这里不填也是可以的
accept=".jpg,.jpeg,.png,.bmp" //限制文件
:auto-upload="false" //自动上传,设置关闭
:limit="1"//最大上传数
:show-file-list="false"//是否显示上传列表,由于只上传一张图,就不显示了
:before-upload="beforeAvatarUpload"//上传前的检验,检验不通过则不会上传
:http-request="httpRequestTouXiang"//自定义上传
:on-change="upPloadTx" //在图片改变后,调用函数上传>
<img v-if="imageUrl"
:src="imageUrl"
class="avatar">
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
接下来是非常重要的js内容
// 上传前的钩子
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
// 头像自定义上传
async httpRequestTouXiang(param) {
//传参进来,同时定义一个formdata对象
const formData = new FormData()
// console.log(param.file)
//通过 append 函数往formdata对象里传参,这里传的是后端需求的接口信息
formData.append('fname', 'headfile')
formData.append('headfile', param.file)
//发送ajax请求,这里用的是axios formData内容里大概是
//{
//fname:headfile
//headfile:param.file(图片对象)
//}
const { data: res } = await this.$http.post(
'api/vranchor/fileuploads',
formData
)
console.log(res)
// this.adminData.imageUrl = res.data
this.imageUrl = '***********' + res.data
},
// 图片改变的钩子
upPloadTx() {
// console.log(this.$refs.uploadToux)
this.$refs.uploadToux.submit()
},
这样就算成功了