Element 上传图片

element 在上传文件是  action  的属性是链接上传地址的     直接将地址填入   上传时会报错  缺少请求头 

记录一下上传文件的使用  以及配置 

<el-upload
            class="upload-demo"
            :action="uploadImgUrl"
            :headers="headers"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/jpeg/png文件,且不超过500kb
            </div>
          </el-upload>

在data(){return{   }}里初始化

data(){return{  
 uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: 'Bearer ' + getToken()
     }
  }
}

getToken 的引入

import { getToken } from '@/utils/auth'

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 提供了 `el-upload` 组件用于上传文件,可以通过设置 `:show-file-list="false"` 来禁止上传成功后在页面上显示已上传的文件信息,而是通过 `:on-success` 回调函数获取上传成功后的返回值进行处理,进而实现图片上传成功后的回显。 以下是一个示例代码: ```html <template> <el-upload class="avatar-uploader" action="/upload" :on-success="handleSuccess" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </template> <script> export default { data() { return { imageUrl: '' } }, methods: { beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg' const isPNG = file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG/PNG 格式!') return false } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!') return false } return true }, handleSuccess(response, file, fileList) { this.imageUrl = URL.createObjectURL(file.raw) // 可以将response的图片地址保存到数据库,以便之后再次访问时显示已上传的图片 console.log(response) } } } </script> <style> .avatar-uploader { display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border: 1px dashed #d9d9d9; border-radius: 50%; overflow: hidden; background-color: #f7f7f7; } .avatar { width: 100%; height: 100%; object-fit: cover; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; transition: all .3s; } .avatar-uploader:hover .avatar-uploader-icon { color: #409EFF; } </style> ``` 在 `handleSuccess` 回调函数,通过 `URL.createObjectURL` 方法将上传成功后的文件转换成本地 URL 地址,再将其赋值给 `imageUrl` 变量,即可实现图片上传成功后的回显。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值