vue element-ui v-for循环el-upload上传图片 动态添加、删除方式
作者：杰瑞LJ
这篇文章主要介绍了vue element-ui v-for循环el-upload上传图片 动态添加、删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui v-for循环el-upload上传图片 动态添加、删除
表单元素
<el-row v-for="(v,i) in RecordOperation.imgList" :key="i">
<el-col :span='11'>
<el-form-item label="图片">
<el-upload
accept="image/jpeg,image/png"
class="avatar-uploader"
:action="uploadUrl()"
:show-file-list="false"
:on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
:before-upload="beforeUploadImageDynamicPic">
<img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
<i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="图片介绍">
<el-input minlength="4" maxlength="20" v-model.trim="v.content"></el-input>
</el-form-item>
</el-col>
<el-col :span="2" align="right" v-show="RecordOperation.imgList.length<=2?false:true">
<el-button type="text" style="color:red;line-height:32px;" @click="delDynamicPic(i,RecordOperation.imgList)">删除</el-button>
</el-col>
</el-row>
图片上传验证，上传图片处理，删除图片
// 动态图片验证
beforeUploadImageDynamicPic(file){
var _this = this;
var isLt10M = file.size / 1024 / 1024 < 10;
if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) {
_this.$message.error('请上传正确的图片格式');
return false;
}
if (!isLt10M) {
_this.$message.error('上传图片大小不能超过10MB哦!');
return false;
}
},
//动态图上传成功
dynamicPicSuccess(obj,res,file) {
var imgList = this.RecordOperation.imgList
var index = obj.index;
imgList[index].picUrl = res.data.filePath;
// 少于5张图时，自动添加一行
if(imgList.length<5)
imgList.push({content: '', picUrl: ""});
},
// 移除动态建设图片
delDynamicPic(i,list) {
this.$confirm('确认删除该条记录？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
list.splice(i, 1);
});
},
vue+Element-ui(el-upload) 上传图片/文件
文件上传时携带参数
文件上传时,想要在上传的时候携带参数，可直接使用：
:data={参数} ,参数为键值对的形式{key1:value1,key2:value2}
<el-upload
:data={pid:this.pid}
>
</el-upload>upload
open: 是否显示弹出层，该属性的值为布尔型，false表示不显示，true表示显示。title: 弹出层标题，该属性的值为字符串类型。updateSupport: 是否更新已经存在的用户数据，该属性的值为整型。若为0，则不更新；若为1，则更新。headers: 设置上传的请求头部，该属性的值为一个对象类型，包含了一个Authorization属性，在请求头部中将会添加Authorization属性的值为"Bearer "加上getToken()方法的返回值，此处的返回值就是token（根据自己需求改！）。url: 上传的地址，该属性的值为一个字符串类型，值process.env.VUE_APP_BASE_API + "/api/common/upload"。- 其中，process.env.VUE_APP_BASE_API是一个环境变量，其值在不同的环境中可能会有所不同，表示应用程序的基本API地址。
<el-upload
:headers="upload.headers"
:action="upload.url"
:on-success="handleFileSuccess"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="completionPhotoList"
:on-change="changeFile"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<script>
export default {
data() {
return {
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/api/common/upload",
},
}
}before-remove来阻止文件被删除的操作
<el-upload
:before-remove="beforeRemove"
>
</el-upload>
<script>
export default {
data() {
return {
};
},
methods: {
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
}
}
</script>multiple、limit、on-exceed属性
给控件加了multiple属性，就表示可以多选；
通过limit设置多选的个数限制，当不需要多选（只想单选文件）时，不加multiple属性；
可多选，无个数限制，不设置limit这个属性即可；
on-exceed：超出限制时会调用此方法；
超出三个文件给予提示信息，如图：
<el-upload
multiple
:limit="3"
:on-exceed="handleExceed"
>
</el-upload>
<script>
export default {
data() {
return {
};
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
}
}
</script>before-upload属性以及on-success属性
注意auto-upload属性的坑：:auto-upload="false"时，before-upload 不起作用；
为啥？
before-upload: 文件上传之前触发，指当文件已经被选中，提交时才会触发此事件auto-upload：设置为false时，选中文件不会触发上传事件
解决方法：
将before-upload里面要写的内容放到on-change事件中去实现
:auto-upload="false"设置为true
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :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>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。