vue 自定义图片文件上传结合elementui

默认展示
点击上传之后的样子 (在重新选择图片的时候直接点击图片即可)

<el-form label-width="120px" :model="formData" ref="formData">//show-file-list    是否显示已上传文件列表 //http-request  覆盖默认的上传行为，可以自定义上传的实现//handleAvatarSuccess 文件上传成功时的钩子//beforeAvatarUpload  上传文件之前的钩子<el-form-item :label="label" prop="url"><el-uploadclass="avatar-uploader"action="1":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":http-request="upload"><img v-if="formData.url" :src="formData.url" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item> </el-form>

data:

formData: { url: "", //图片地址 },

上传封装的js uploadfile.js

import axios from 'axios'
import { getToken } from '@/utils/auth'//获取token的
const baseURL = process.env.VUE_APP_BASE_API
export function UploadFile(url, FormData) {return axios.post(baseURL + url, FormData,{headers: {'Content-Type': 'multipart/form-data','api-version': '1.0','token': getToken()}})
}

methods:

import { UploadFile } from "@/utils/uploadfile.js";
//上传的代码
upload(file) {var formdata = new FormData();formdata.append("file", file.file);UploadFile("/file/upload", formdata).then((res) => {console.log(res.data.data, "==res===");this.formData.url = res.data.data; this.$message.success(res.data.message);});},
//文件上传成功时的钩子handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},//上传文件之前的钩子beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}

vue 自定义图片文件上传结合elementui相关推荐

vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
wangeditor自定义图片视频上传
wangeditor自定义图片视频上传完整代码 <template><div style="border: 1px solid #ccc;height: 100%;&qu ...
springmvc图片文件上传接口
springmvc图片文件上传用MultipartFile文件方式传输 Controller package com.controller;import java.awt.image.Buffere ...
axios文件上传 formdata_基于业务场景下的图片/文件上传方案总结
图片/文件上传组是企业项目开发中必不可少的环节之一, 但凡涉及到用户模块的都会有图片/文件上传需求, 在很多第三方组件库(ant desigin, element ui)中它也是基础组件之一. 接下来 ...
android webview 多文件上传,Android网页WebView图片文件上传的问题
Android网页WebView图片文件上传的问题发布时间:2020-07-13 22:48:15 来源:51CTO 阅读:5922 作者:拾荒者老大在安卓下,webview上传图片点击是没用的, ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...

vue 自定义图片文件上传结合elementui

vue 自定义图片文件上传结合elementui相关推荐

最新文章

热门文章