vue2或者vue3图片上传功能（upload）

采用element ui中upload组件上传，目前支持上传单张图片，如果多张可进行更改。
一、页面上组件使用

注意：①如果是多张图片，file-list会用到。②name是申明上传文件的格式，可以和后端商量，有时候上传图片后端只需要image格式，但有时候后端会把图片和文件定义成一种格式即file。③action。图片上传的接口地址，通常是公司的服务器，这个地址不能直接填测试地址，会报跨域问题，需要知道本地开发从哪里开始代理，我这里是从api开始代理，所以action后面为api+图片接口地址。④v-if控制图片上传成功后回显，v-else则是控制未上传图片显示＋号。

 <el-uploadref='uploadImg':action="uploadUrl"class='avatar-uploader'lazy:show-file-list="false":on-success="handleBannerSuccess":before-upload="beforeEditAvatarUpload":on-error="handleBannerError":on-change="handleChange":file-list="fileList"name="file"><img v-if="addData.bannerUrl" :src="addData.bannerUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

二、一些方法介绍（ts写法，可忽略）

const bannerMethods = reactive({beforeEditAvatarUpload: (fileList) => {loading.value = trueconsole.log('before', fileList)const isJPG = fileList.type === 'image/jpeg' || fileList.type === 'image/png'const isLt2M = fileList.size / 1024 / 1024 < 2if (!isJPG) {ElMessage.error('上传头像图片只能是 JPG 格式!')return isJPG}if (!isLt2M) {ElMessage.error('上传头像图片大小不能超过 2MB!')return isLt2M}},handleChange(file, fileList) {// 当多余一个的时候替换文件if (fileList.length > 1) {fileList.splice(0, 1)}},handleBannerSuccess: (response, file, fileList) => {loading.value = falseaddData.bannerUrl = response.dataconsole.log('after', fileList)},handleBannerError: () => {ElMessage.error('上传失败')addData.bannerUrl = ''},})

三、具体请求信息
接口:打包到测试环境后，会把api之前替换成测试环境域名。（可以对照action地址看看就能明白action该如何写）

参数类型：

点开view souce

上传成功后服务端会返回一个图片地址，前端直接赋值即可。

忘了一点：通常来说上传需要携带token，所以需要在headers里面添加。
直接在页面上加上：headers=‘headers’，headers从缓存里面获取。

末尾补充样式代码

<style lang="scss" scoped>
:deep(.avatar-uploader .el-upload) {border: 1px dashed #666;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}.avatar {width: 100px;height: 100px;display: block;
}
// .el-dialog__footer{//   text-align: center !important;
// }
.avatar-uploader .el-upload:hover {border-color: #409eff;
}.avatar-uploader-icon {font-size: 20px;color: #8c939d;width: 100px;height: 100px;line-height: 100px;text-align: center;
}

vue2或者vue3图片上传功能（upload）相关推荐

「VUE架构」VUE2.0 图片上传功能（移动端）
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签由于我们是通过input标签的 ...
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码 ...
ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能,就无法在项目中通过npm的方式来安装ckeditor,而是需要在https://ckeditor.com/ckeditor-5/online-builde ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
百度编辑器图片上传功能解疑
最头疼的上传图片问题版本选择和自定义配置项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里. 我使用的环境是.NET MVC3 最头疼的上传图片问题 ...
人人网的相册里图片上传功能是怎样实现的
大侠们,给我讲解下类似于人人网的相册里,图片上传功能是怎么实现的,它可以批量上传.我的想法是实现一个批量上传图片的功能,1.可以让用户同时选择多个图片上传.2.上传后会显示出来,并且可以单独对某张图进 ...
Web开发中图片上传功能总结
图片上传功能总结 1.添加文件上传所需jar包(commons-io-1.4.jar和commons-fileupload-1.1.1.jar) 2.在form表单上添加自带属性 enctyp ...
Java实现图片上传功能（前后端：vue+springBoot）
Java实现图片上传功能(前后端:vue+springBoot) 前言: 前端: 组件引入基础文件上传自定义上传方法后端: 需要引入的jar包: 基础文件上传 Controller层: serv ...
java商城后台图片上传功能_淘淘商城图片上传功能的实现
前提: 参考:集群环境下图片上传的功能分析.vmware的安装,linux的安装.nginx和ftp服务在linux的安装,ftp的客户端的使用. 图片上传是图片存储到ftp服务器上面,所以这里不需要 ...

vue2或者vue3图片上传功能（upload）

vue2或者vue3图片上传功能（upload）相关推荐

最新文章

热门文章