使用 原生js 完成文件的上传读取
首先要知道上传文件以及文件删改查的前后端约定规范：
增加：传递给后端你所选择的文件流，同时进行图片的回显；
编辑：分为两种情况：
1.你只编辑其余文本信息，对图片区域不进行任何修改。此时你不需要传递任何和图片相关的参数；
2.对图片进行了增删改。增加的图片就传递对应的file流，删除的图片传递给后端图片对应id。
删除：传递给后端删除的图片id集合（这个id是后端给你的）
<div >
<div v-for='(item ,index ) in imgList' :key="index"
style="width: calc(20% - 7px);margin-right:5px;margin-bottom:5px;border:1px solid #ddd;" :style="{backgroundImage:'url(' + item.img_addr + ')',
backgroundRepeat:'no-repeat',position: 'relative', backgroundPosition:'center center', backgroundSize: 'contain'}">
<span @click='delImg(index,item.image_id)'><img src="@static/images/delete.png"></span>
</div>
<div class='room_add_img' style="width: calc(20% - 5px);margin-right:5px;margin-bottom:5px;"
>
<span><img src="@static/images/add_img.png"></span>
<span>上传图片</span>
<input @change='addImg' id="imgUpdateId" type="file">
</div>
</div>
<script>
export default{
data(){
return {
fd:null,//formData，和后端进行数据交互
imgList:[],//图片的地址结合，通过地址展示到页面中
oldImageIDs:[],//删除时，需要向后端传递的删除图片的id集合
fileArr:[],//文件流集合
}
}，
methods:{
addImg(event){
//添加图片，event是input默认参数，其中里面的files是我们需要的文件流，可以打印一下看看里面的各个参数，了解了解
if(this.imgList){
//限制最多添加五张图片
if (this.imgList.length >= 5) {
this.$message.warning('最多只能上传5张图片!');
return
}
}
var file = event.target.files[0];//获取当前的文件流，这就是你传递给后端的参数
//校验图片的类型和大小
const isJPG = file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!');
return;
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
return;
}
var reader = new FileReader();//使用FileReader对象，来进行异步文件的读取，是input:file的绝配
reader.readAsDataURL(file);
var that = this;
reader.onloadend = function (e) {
//这个e是默认形参，里面有图片的base64转换结果，以及上传速度之类的信息。当然我们一般都需要这个base64的结果，进行上传图片的回显
that.fileArr.push(file);//设置向后端传递的参数
that.imgList.push({img_addr: reader.result})//设置回显图片的地址（base64格式）
}
}，
editOrder(row) {
//row是编辑时表单的数据信息，不在多说
//编辑时，必须将删除id集合，以及文件流集合清空，否则后续会出现错乱问题。
this.oldImageIDs= []；
this.fileArr = []；
row.imgUrl.forEach(item=>{
item.img_addr = window.$url_front.fileUrl+item.image_url;//设置图片的线上地址，进行回显
})
this.imgList = row.imgUrl; //赋值图片列表，每一个对象都会有一个id，这个id是后端所返，根据此id进行删除操作
.
.
.
//在此仅进行图片的操作，表单的其他赋值操作不在描述，
},
delImg(item, imgId) {
//删除图片
this.imgList.splice(item, 1);
if (imgId) {
this.oldImageIDs.push(imgId); //设置删除图片的id集合，
} else {
this.fileArr.splice(item , 1);
}
document.getElementById('imgUpdateId').value = '';
},
saveItem（）{
//保存
}
this.fd = new FormData();
this.fileArr.map(item => { //设置文件流集合
this.fd.append('files', item)
});
this.fd.append('img_ids',this.oldImages) //设置所删除的图片id集合
api.........//进行数据交互就行了
}
}
</script>
ps：前端和后端进行图片的交互，其实就是用base64码进行二进制文件的数据交互。
