上代码：
<template>
<div>
<el-upload
class="avatar-uploader"
action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
:headers="headers"
name="good_pic"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>--------------------------------------------------------</p>
<p>--------------------------------------------------------</p>
<el-upload
class="avatar-uploader"
action
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:http-request="httpRequest"
>
<img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import { postUploadImg } from "@/request/api"
export default {
data() {
return {
imageUrl1: "",
imageUrl: "",
headers: {
"X-Nideshop-Token": localStorage.getItem("token"),
},
};
},
methods: {
httpRequest(data){
// 发送上传图片请求
console.log(data.file);
let form = new FormData();
form.append("good_pic", data.file);
postUploadImg(form).then(res => {
if(res.errno === 0){
this.imageUrl1 = res.data.fileUrl;
}
})
},
handleAvatarSuccess(response, file, fileList) {
console.log(response);
// console.log( file);
// console.log( fileList);
// this.imageUrl = fileList.fileUrl;
if (response.errno === 0) {
this.imageUrl = response.data.fileUrl;
}
},
beforeAvatarUpload(file) {
console.log(file);
},
},
};
</script>
<style lang = "less" scoped>
</style>
