需求:
1.实现图片的上传和预览功能
2.图片不能超过规定的张数
3.预览时,图片可以进行上一张和下一张的切换
html部分代码
<a-button type="primary" ghost
size="small" class="margin-right10"
@click="pictureSend(record, index)">上传图片</a-button>
<a-button type="primary"
size="small"
@click="picturePreview(record, index)">图片预览</a-button>
<a-modal title="上传图片" v-model="visibleA" ok-text="保存" @ok="handleSaveA" @cancel="handleCancelA">
<div class="clearfix">
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture"
:file-list="fileList"
:multiple="true"
:remove="handleFileRemove"
@preview="handlePreview"
@change="handleChangePicture"
>
<a-button block v-if="fileList.length < 8"> <a-icon type="upload"/> 点击上传 </a-button>
</a-upload>
</div>
</a-modal>
<a-modal title="图片预览" v-model="visibleB" ok-text="关闭" @ok="handleCancelB" @cancel="handleCancelB">
<!-----将需要预览的图片放置在model框中--->
<viewer :images="fileList">
<img v-for="item in fileList" :src="item.url" :key="item.uid" style="padding:0 10px 10px 0;width: calc(100% /3);height:160px;"/>
</viewer>
</a-modal>
js部分代码如下:
<script>
// 引入v-viewer库
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
data() {
return {
// 图片路径
fileList: [
{
uid: '-1',
name: 'image1.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
},
{
uid: '-2',
name: 'image2.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
},
{
uid: '-3',
name: 'image3.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
},
{
uid: '-4',
name: 'image4.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}
],
visibleA: false,
visibleB: false
}
},
methods: {
// 上传图片按钮
pictureSend() {
this.visibleA = true
},
// 图片预览
picturePreview() {
this.visibleB = true
},
// 保存
handleSaveA() {},
// 取消
handleCancelA() {
this.visibleA = false
},
// 关闭
handleCancelB() {
this.visibleB = false
},
// 预览图片调用的函数---》使点击时不进入预览详情
handlePreview() {
return false
},
// 文件删除
handleFileRemove (file) {
console.log(file)
this.$message.warn('您点击了删除')
},
// 上传图片
handleChangePicture({ fileList }) {
if (fileList.length <= 8) {
this.fileList = fileList
} else {
this.$message.error('图片最多不能超过八张!')
}
}
}
}
</script>
注意:
:multiple=“true”—>支持多选文件
上传图片功能的最终效果如图:
预览图片功能的最终效果如图: