el-element照片墙，upload图片上传

最新推荐文章于 2024-07-23 15:11:30 发布

春晓_春眠花落

最新推荐文章于 2024-07-23 15:11:30 发布

阅读量2.1k

点赞数

分类专栏： element 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49668076/article/details/124703645

版权

element 专栏收录该内容

26 篇文章 8 订阅

订阅专栏

本文介绍了El-Upload组件如何实现图片上传功能，包括list-type的不同类型展示、文件上传限制、请求头配置以及上传事件处理。重点讲解了如何在Vue应用中使用该组件进行图片上传，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述

官方文档示例
在这里插入图片描述
注解：
list-type：上传之后，图片的显示类型，有三种text、picture、picture-card。

      --text类型显示为文本类型，预览时不能看到上传的图片
       -- picture类型为长图片类型，预览时能够看到上传的图片
      --picture-card类型是方图片类型，预览时能够看到上传的图片

limit 最大允许上传个数
accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
action 必选参数，上传的地址（后端提供上传的服务器地址）
headers 设置上传的请求头部（一般填token、orgid等身份校验信息，一般是保存在本地存储）
file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
on-remove 文件列表移除文件时的钩子
on-success 文件上传成功时的钩子
on-preview 点击文件列表中已上传的文件时的钩子

  <el-col :span="23">
                <el-form-item label="图片:" prop="conTypeFiles">
                  <el-upload
                    ref="upload"
                    :class="{
                      'demo-httpRequestImg': conTypeFiles.length >= 3,
                    }"
                    list-type="picture-card"
                    :limit="3"
                    accept=".jpg,.jpeg,.png"
                    :action="uploadUrl"
                    :headers="headers"
                    :file-list="conTypeFiles"
                    :on-success="upLoadSuccess"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
              </el-col>

import { getToken } from ‘@/utils/auth’

 data() {
    return {
      // 图片上传成功弹窗
      dialogVisible: false,
     // 图片显示地址
      dialogImageUrl: '',
     // 上传文件的fileList
      conTypeFiles: [],
    // 请求头参数
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      // 上传的服务器地址
      uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
      uploadImage: uploadImg,
}}

请求头getToken相关的代码，仅供参考
auth.js

const TokenKey = 'Admin-Token';

export function getToken() { 
  return sessionStorage.getItem(TokenKey)
}

在封装axios的request.js文件中，request请求拦截器中的相关代码

import { getToken } from '@/utils/auth'
// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

上传相关事件

 /** 点击文件事件 -- 预览文件 */
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    /** 文件列表移除文件时的钩子 */
    handleRemove(file, fileList) {
      this.conTypeFiles = fileList
    },
    /** 上传文件 */
    upLoadSuccess(res, file, fileList) {
      // console.log('upload----', res, file, fileList)
      this.fileItem = res
      this.fileItem.annexType = 0
      this.fileItem.name = file.name    
      this.imgChange(res.data.fileName, res.data.fileUrl)
    },
    /** 图片地址转换 */
    imgChange(fileName, fileUrl) {
      this.$set(this.fileItem, 'url', fileUrl)   
      this.conTypeFiles.push(this.fileItem)
    },