upload pictures at the front end, file objects can be printed out, but file objects are not recognized in the background
the code for uploading pictures is as follows
<template>
<div class="upload">
<div class="upload_warp_upload">
<span v-for="(item,index) of imgList" class="upload_span">
<img :src="item.url">
<span @click="fileDel(index)" class="upload_del"></span>
</span>
<div class="upload_warp_left" @click.stop="fileChange">
<span></span>
</div>
</div>
<input accept="image/*"
@change.stop="fileChange($event)"
type="file" id="upload_file" style="display: none"/>
</div>
</div>
</template>
<script>
export default {
data(){
return {
imgData:[],
imgList: [],
size: 0,
}
},
methods:{
fileClick() {
document.getElementById("upload_file").click();
},
fileChange() {
let reader = new FileReader();
let file = e.path[0].files[0];
reader.readAsDataURL(file);
let that = this;
reader.onloadend = function () {
let url = reader.result;
that.imgList.push({url: url, name :file.name});
that.$messageBox("");
that.imgData.push(file);
that.$emit("imageListChange", that.imgData);
};
},
fileDel(index) {
this.imgList.splice(index, 1);
},
}
}
</script>
file object printed from the front end
network:
Dear gods ~ what"s going on? I"m on the verge of collapse