vue+element 递归上传图片
Posted 500m
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+element 递归上传图片相关的知识，希望对你有一定的参考价值。
直接上代码。
<template>
<div>
<el-upload
action="http://localhost:3000/picture"
:http-request = "getimages"
:before-upload = "beforeUp"
:headers="headers"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-progress="progress"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" >
</el-dialog>
<el-row>
<el-button type="info" plain @click="upload">信息按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: ‘‘,
dialogVisible: false,
headers:{},
imgArr:[],
index:0,
formData:new FormData()
};
},
methods: {
beforeUp(file){
// console.log(file);
/* 获取图片原本的二进制对象，并存储到图片数组模型中 */
this.imgArr.push(file)
},
/* 移除 */
handleRemove(file, fileList) {
// console.log(file, fileList);
console.log(‘移除时获取的图片的 uid = ‘+file.uid);
this.imgArr = this.imgArr.filter(t=>t.uid!=file.uid)
},
/* 预览 */
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
// console.log(file);
},
/* 上传中 */
progress(){
console.log(‘上传中‘);
},
/* 代替默认上传图片方法 */
getimages(res){
},
/* 最后点击上传 */
upload(){
this.a1()
},
/* 递归1条条上传 */
a1(){
if(this.index<this.imgArr.length){
if(this.index==this.imgArr.length){
return
}
this.formData.delete(‘file‘)
this.a2()
}
},
async a2(){
console.log(this.index);
this.formData.append(‘file‘,this.imgArr[this.index]);
this.$http.post(‘/picture‘,this.formData)
this.index++
this.a1()
}
},
created(){
// this.$http.get(‘/picture‘)
// this.headers ={Authorization : ‘Bearer ‘+(localStorage.token || ‘‘)}
}
}
</script>
存在疑惑的地方可以留言一起讨论 。
以上是关于vue+element 递归上传图片的主要内容，如果未能解决你的问题，请参考以下文章
vue element-ui 上传图片到oss阿里云(第三方服务)
Vue结合element ui 实现图片上传可预览，可删除,以base64字符串上传到服务器