// componente html <!-- Imagen --> <el-form-item label="Imagen" prop="imagen" > <el-upload class="avatar-uploader" action="" drag :auto-upload="false" :show-file-list="false" :multiple="false" :on-change="onUploadChange" accept=".jpeg, .png, .jpg, .gif, .svg" > <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <div v-else class="el-upload__text" > Suelta tus archivos aquí o <em>haz clic para cargar</em> <p>Sólo archivos .jpeg, .png, .jpg, .gif, .svg</p> </div> <!-- <el-icon v-else class="avatar-uploader-icon"></el-icon> --> </el-upload> </el-form-item> // codigo js onUploadChange(file) { this.imageUrl = URL.createObjectURL(file.raw); this.form.imagenNueva = file.raw; }, data(){ imageUrl: null, }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter