我要评论elementui中el-upload上传文件转base64格式
<el-upload class="upload-demo" ref="upload" action="" :on-change="httprequest" :on-remove="httprequest" :file-list="filelist" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload>
data() {
return {
filelist: [],
uploadfile: []
}
},
methods: {
async httprequest(file, filelist) {
this.uploadfile = []
for (let i in filelist) {
this.uploadfile[i] = await this.getbase64(filelist[i].raw)
}
console.log('上传文件列表', this.uploadfile)
},
// 转base64码
getbase64(file) {
return new promise((resolve, reject) => {
const reader = new filereader()
let fileresult = ''
reader.readasdataurl(file)
// 开始转
reader.onload = () => {
fileresult = reader.result
}
// 转 失败
reader.onerror = error => {
reject(error)
}
// 转 结束
reader.onloadend = () => {
resolve(fileresult)
}
})
},el-upload 组件上传图片多张 转换为base64
根据后台的需求，需要把图片处理为base64传给他，直接上代码。
图片显示正常
<el-upload
ref="upload1"
action=""
list-type="picture-card"
multiple
:http-request="beforeavatarupload"
:limit="limit"
:on-exceed="onexceed"
:on-remove="onremove"
>
<i class="el-icon-plus"></i>
</el-upload>
// 自定义上传方法 处理图片转化为base64
beforeavatarupload(file){
const self = this;
let reader = new filereader();
reader.readasdataurl(file.file);
reader.onload = function (e) {
let img_base64 = e.target.result.split(",")[1];
// 自定义数组对象，传给后台的数据
self.imgbase64array.push({ base64str: img_base64 });
}
},
// 限制提示
onexceed() {
this.$message({
message: "最多上传6张图片",
type: "warning",
});
},
onremove(file, filelist) {},
// 提交代码
onsubmit(){
// 判断 1无照片到有照片 2 有照片 但未新增 页面进行删除 3 在原有基础上进行新增照片（也包括原有基础删除但未删除全部，再新增）
var that=this
if (this.imgbase64array.length > 0 && this.form.imgs.length == 0) {
this.form.imgs = this.imgbase64array;
console.log("1无照片到有照片", this.form.imgs);
} else if (
this.imgbase64array.length == 0 &&
this.form.imgs.length > 0
) {
this.form.imgs = this.form.imgs;
console.log("2 有照片 但未新增 页面进行删除", this.form.imgs);
} else if (
this.imgbase64array.length > 0 &&
this.form.imgs.length > 0
) {
this.form.imgs = [...this.imgbase64array, ...this.form.imgs];
console.log("3 在原有基础上进行新增照片", this.form.imgs);
}else if (
this.imgbase64array.length == 0 &&
this.form.imgs.length == 0
) {
this.form.imgs = [];
console.log("4 在原有基础上进行删除照片 未新增", this.form.imgs);
}
// console.log(that.form.imgs)
var res = await geschoolupdatedetail(that.form);
console.log(res);
if (res.flag === 1) {
that.$message.success("修改成功");
// 清空图片
this.$refs.upload1.clearfiles();
}
},
图片显示如上，在线地址显示有点问题找后台重新对啦（这个大家就不要太在意）
上传成功以后后台返回url页面
显示代码如下：
<div class="imgs" v-if="form.imgs && form.imgs.length > 0">
<div v-for="(img, index) in form.imgs" :key="index">
<img :src="img.url" alt="" />
<el-button class="delbutton" type="danger" size="small" @click="deleteimg(img.id)">删 除</el-button>
</div>
</div>
// 删除图片
deleteimg(id) {
var index;
var arr = this.form.imgs;
arr.map((item, i) => {
if (item.id == id) {
index = i;
arr.splice(index, 1);
}
});
this.form.imgs = arr;
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论