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;}