Vue el-upload 组件多张图片上传并回显（无需添加样式）以及正确使用方式

MultiUpload 组件内容：

<template><div><el-upload:action="uploadUrl()"list-type="picture-card"accept=".jpg,.jpeg,.png,.gif"multiple:file-list="fileList":on-remove="handleRemove":on-success="handleUploadSuccess":before-upload="handleBeforeUpload":on-preview="handlePreview":limit="maxCount":on-exceed="handleExceed"><i class="el-icon-plus" /></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" :alt="dialogImageName"></el-dialog></div>
</template>
<script>import { getImageUpload } from '@/api/badFruit'
export default {name: 'MultiUpload',props: {// 图片属性数组value: {type: Array,default: () => []},// 最大上传图片数量maxCount: {type: Number,default: 5}},data() {return {fileList: [],imagesList: [],images: [],dialogVisible: false,dialogImageUrl: null,dialogImageName: '',num: 0,fileNum: 0}},created() {// 上传组件显示列表this.fileList = this.value// 图片保存数组this.imagesList = this.value},methods: {// 文件上传地址uploadUrl() {return getImageUpload},handleRemove(file, fileList) {const list = JSON.parse(JSON.stringify(fileList))this.imagesList = list.map(item => ({name: item.name,url: item.url}))this.$emit('input', this.imagesList)},handlePreview(file) {this.dialogVisible = truethis.dialogImageUrl = file.urlthis.dialogImageName = file.name},handleUploadSuccess(res, file) {// console.log(res, file)if (res.code === '200') {const { message, path } = res.dataif (message === '图片上传成功') {this.images.push({name: file.name,url: path})this.num++if (this.num === this.fileNum) {this.num = 0this.fileNum = 0// 这里如果 this.value.push(imageUrl) 这么写，vue会报出警告，大概意思是value作为props不应该在子组件中被修改// 应该根据 value 得到新的值，而不能修改它，this.value.concat(imageUrl)也是可以的，concat方法返回新的数组this.$emit('input', this.imagesList.concat(this.images))this.images = []}}}},handleBeforeUpload(file) {this.fileNum++console.log('上传个数：' + this.fileNum)},handleExceed(files, fileList) {this.$message({message: '最多只能上传' + this.maxCount + '张图片',type: 'warning',duration: 1000})}}
}
</script>
<style scoped lang="scss"></style>

使用方式：

	// 模板<el-form-item label="坏果图片"><!--<el-input v-model="form.image" />--><multi-upload v-model="form.image" @input="getImages" /></el-form-item>// 方法getImages(images) {console.log(images)this.form.image = images},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！