多张图片列表上传
1、视图
<div style="display:flex;" class="clearfix"><span>添加图片：</span><a-uploadlist-type="picture-card":file-list="fileList"@preview="handlePreview"@change="handleChangeImg":before-upload="beforeUpload"><div v-if="fileList.length < 3" style="display:flex"><div class="ant-upload-text" style="width:100px"><a-icon :type="loading ? 'loading' : 'plus'"/><p style="width:100px">上传图片</p></div></div></a-upload></div><a-modal :visible="previewVisible" @cancel="handleCancel"><img style="width: 100%" :src="previewImage"></a-modal>
2、js逻辑
//data定义数据image: [],fileList: [],uploading: false,previewVisible: false,previewImage: '' //预览图片地址//js引入import uploadOSS from './../tool/alioss'async beforeUpload(file) {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'if (!isJpgOrPng) {this.$message.error('请上传JPEG/PNG格式!')}const isLt2M = file.size / 1024 / 1024 < 2if (!isLt2M) {this.$message.error('图像必须小于2MB!')}try {let res = await uploadOSS(file).then(result => {this.image.push({ uid: file.uid, name: result.fileName, status: 'done', url: result.fileUrl })this.$message.success('添加图片成功！')},err => {this.$notification.error({message: `添加图片失败`,description: `园区添加图片失败，请稍后再试。错误信息：\n${err.toString()}`})})} catch (e) {console.log(e)}},handleChangeImg({ fileList }) {this.fileList = fileListthis.fileList.forEach(item => {item.status = 'done'})let arr = []for (let i = 0; i < this.fileList.length; i++) {for (let j = 0; j < this.image.length; j++) {if (this.fileList[i].uid == this.image[j].uid) {arr.push(this.image[j])}}}this.image = arr},getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => resolve(reader.result)reader.onerror = error => reject(error)})},async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await this.getBase64(file.originFileObj)}this.previewImage = file.url || file.previewthis.previewVisible = true},handleCancel() {this.previewVisible = false},
3、数据交互
//编辑数据回显 this.fileList = JSON.parse(record.image)this.image = this.fileList//添加数据清空this.fileList = []this.image = []//后端数据传参params = {name: this.name,desc: this.desc,image: JSON.stringify(this.image)}
4、图片列表样式
.drawer {div {span {display: inline-block;width: 120px;text-align: right;}p {width: 230px;display: inline-block;}/deep/ .ant-upload-list {display: flex;z-index: '999';}.ant-upload-picture-card-wrapper {display: flex;}}}
使用组件上传图片后，利用oss获取一个图片的线上地址，在把这个图片地址的数组列表存入后端，以便后期回显查看
<template><div class="clearfix"><a-uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76"list-type="picture-card":file-list="fileList"@preview="handlePreview"@change="handleChange"><!-- 上传3个 --><div v-if="fileList.length < 3"><a-icon type="plus" /><div class="ant-upload-text">拖拽或上传原图片</div></div></a-upload><a-modal:visible="previewVisible":footer="null"@cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></div></template><script>export default {data() {return {previewVisible: false, //是否预览previewImage: "", //预览图片地址fileList: [], //上传文件列表};},methods: {//取消预览handleCancel() {this.previewVisible = false;},// 预览async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await this.getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},// 上传文件改变handleChange({ fileList }) {this.fileList = fileList;},//base64预览getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = (error) => reject(error);});}},};</script>
