element上传附件（el-upload 超详细）

经常会有人问我上传照片怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，我们慢慢看，先看结构代码，之中有注释：

<template><div class="ceshi"><el-uploadclass="avatar-uploader"action="#":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUploada"><imgv-if="coverImg":src="api + coverImg"class="avatar"/><i v-else class="el-icon-plus avatar-uploader-icon"></i><p style="color: #666; margin-top: 6px; margin-bottom: 12px">点击添加</p></el-upload></div>
</template>
<script>// js文件 接口配置
// // 批量上传文件
// export function filesArray(data) {
//   return request({
//     url: "/upload/files",
//     method: "post",
//     headers: { "Content-Type": "multipart/form-data" },
//     data: data
//   });
// }import {filesArray } from "@/api/curriculum";//上传接口
export default {components: {},data() {return {coverImg:'',loadingstate: false,api: window.g.BASE_API,};},watch: {},methods: {// 封面上传handleAvatarSuccess(response, file, fileList) {this.loadingstate = false;},// 文件格式验证beforeAvatarUploada(file) {this.loadingstate = true;let index = file.name.lastIndexOf(".");let extension = file.name.substr(index + 1);let extensionList = ["png","PNG","jpg","JPG","jpeg","JPEG","bmp","BMP",];const isLt2M = file.size / 1024 / 1024 < 10;if (!isLt2M) {this.$message({message: "封面不可超出10M",type: "warning",center: true,});return false;} else if (extensionList.indexOf(extension) < 0) {this.$message({message: "当前文件格式不支持",type: "error",center: true,});return false;} else {const obj = new FormData();//上传文件obj.append("files", file);// 上传文件接口filesArray(obj).then((res) => {if (res.code == 200) {this.coverImg = res.data[0].accessUrl;//接口地址}});}},},created() {},
};
</script>
<style scoped>.ceshi{margin: 50px 600px;}img {width: 200px;height: 200px;}
</style>

element上传照片（el-upload 超简单）相关推荐

IDEA项目初次上传到git（超简单）
IDEA上传到git 1.右键项目,打开 `终端` 2. 在打开的终端输入 `git init` 3. 右键项目选择 `git` > `添加(add)` 4. 右键项目选择 `git` &g ...
文件上传/下载接口（超简单的教程来了）
前言文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: multi ...
手机端上传照片实现压缩、拖放、缩放、裁剪、合成拼图等功能
一.序如题,最近工作中遇到一个移动端用户上传照片,然后在线编辑,添加一些别的图片合成的功能,类似于超级简化版美图秀秀.总结了一下,大致操作包含上传图片,图片压缩.触摸拖动图片.放大/缩小.添加别的 ...
Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）...
Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
使用axios上传照片
原来使用vue1.0的时候,我们一直使用ajax来发送请求,当接触新的项目的时候,我们使用了vue2.0,结合着使用了axios来代替ajax. 安装axios的话: 1-利用npm安装npm ins ...
android上传图片被旋转,input上传照片旋转解决办法
需求很简单:h5拍照上传照片,然后显示出来问题在:上传之后的图片在PC,IOS端均能正常显示,Android端显示的则是被旋转90度的. 直接上代码下面这个方法传入file对象,然后会去除掉照片中 ...
php利用ftp上传视频,PHP用FTP类上传文件视频等的简单实现方法
文件1:ftp.php<?php /** * 仿写CodeIgniter的FTP类 * FTP基本操作: * 1) 登陆; connect * 2) 当前目录文件列表; filelist * 3 ...
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用！
YDOOK: Sanic: Python request post请求上传照片或文件详细具体步骤亲测可用! ©YDOOK JYLin 1. 项目目录架构: Upload result: 上传结果 ...

element上传照片（el-upload 超简单）

element上传附件（el-upload 超详细）

element上传照片（el-upload 超简单）相关推荐

最新文章

热门文章