转载链接：https://www.jianshu.com/p/ce86178221a6
<template> <div> <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput" style="display:none" /> <div class="pic_list_box"> <div class="pic_list" v-show="imgDatas.length"> <div v-for="(src, index) in imgDatas" :key="index"> <!-- <img :src="src" width="80" height="80" alt srcset /> --> <!-- 利用element-ui的图片预览插件 --> <el-image style="width: 100px; height: 100px" :src="src" :preview-src-list="imgDatas" > </el-image> </div> </div> <!-- 替换自己的上传图标 --> <img class="upload_btn" @click="upLoad" src="../assets/logo.png" alt /> <el-button @click="upLoad">图片上传</el-button> </div> </div> </template> <script> import "element-ui/lib/theme-chalk/index.css"; export default { data() { return { imgDatas: [] }; }, methods: { changeImage() { // 上传图片事件 var files = this.$refs.avatarInput.files; var that = this; function readAndPreview(file) { //Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.onload = function(e) { // 防止重复上传 if (that.imgDatas.indexOf(e.target.result) === -1) { that.imgDatas.push(e.target.result); } }; reader.readAsDataURL(file); } } readAndPreview(files[0]); if (files.length === 0) { return; } console.log(files) // 文件上传服务器 // this.setUploadFile(files[0]) }, setUploadFile(file) { this.formData = new FormData(); this.formData.append("files", file, file.name); // 添加到请求体 this.$http .post("/api/dxbase/upload?resType=EVENT", this.formData) .then(res => { console.log(res); }); }, upLoad() { // 触发上传图片按钮 this.$refs.avatarInput.dispatchEvent(new MouseEvent("click")); } } }; </script> <style> .pic_list_box { display: flex; } .upload_btn { width: 100px; height: 100px; padding-left: 15px; } .pic_list { display: flex; } </style>上传笔记
