element ui 上传文件 或 图片

                                         今天做了一个上传图片前来记录一下

在这里插入图片描述

因为我们的项目是element ui 写的,所以也就根据element ui 的上次组件来进行一个编写。写完发现,哎,不对呀,我其他地方也需要这个上传,所以我就封装一个组件,写的不怎么好,请见谅。

<template>
  <div class="MaxBox">
    <el-form>
      <el-form-item
        v-if="loadType == 'pictureFile' ? true : false"
        prop="pictures"
        :label="_loadName"
      >
        <div class="img_upload_line">
          <div class="img_upload_box">
            <el-upload
              class="uploadimage"
              ref="upload"
              :show-file-list="_ShowList"
              :action="uploadUrls"
              :multiple="_ManyLoad"
              list-type="picture-card"
              :with-credentials="true"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error="handleError"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
              :auto-upload="autoUpload"
              :headers="{
                token: token,
              }"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="loadType == 'dragFile' ? true : false"
        prop="pictures"
        :label="_loadName"
      >
        <el-upload
          class="upload-demo"
          :drag="_drag"
          :action="uploadUrls"
          :multiple="_ManyLoad"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-error="handleError"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :auto-upload="autoUpload"
          :on-change="handleChange"
          :headers="{
            token: token,
          }"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入的图片的地址
import { uploadImg, getToken } from '@/api/serve/index.js'
export default {
  props: {
    // 传过来的是否是单文件上传还是多文件上传
    loadType: {
      type: String,
      default: 'pictureFile'
    },
    // 是否支持拖拽
    _drag: {
      type: Boolean,
      default: true
    },
    // 是否显示已上传文件列表
    _ShowList: {
      type: Boolean,
      default: true
    },
    // 是否支持多选文件
    _ManyLoad: {
      type: Boolean,
      default: true
    },
    // 是否支持支持发送 cookie 凭证信息
    _upCookie: {
      type: Boolean,
      default: true
    },
    // 左侧名字
    _loadName: {
      type: String,
      default: '上传图片'
    },
    // 上传的文件大小
    _size: {
      type: String,
      default: '1024'
    },
    // 上传图片类型
    _fileTypeList: {
      type: Array,
      default: () => [
        'jpg',
        'jpeg',
        'png',
        'gif',
        'pdf',
        'doc',
        'docx',
        'xls',
        'xlsx',
        'JPG',
        'JPEG',
        'PBG',
        'GIF',
        'PDF',
        'DOC',
        'DOCX',
        'XLS',
        'XLSX'
      ]
    },
    // 上传的数量
    FileLimit: {
      type: Number,
      default: 10
    },
    autoUpload: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 获取的img提交路径
      uploadUrls: uploadImg,
      // 上传获取的token值
      token: getToken('token') || '',
      // 文件大小的限制
      newSize: Number(this._size),
      // 文件的路径数组
      imgUrlArr: []
    }
  },
  methods: {
    // 移除图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.$emit('_handleRemove', file, fileList)
    },
    // 预览 查看图片
    handlePictureCardPreview (file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
      this.$emit('_handlePreview', file)
    },
    // 上传失败
    handleError (err, file, fileList) {
      this.$emit('_handleError', err, file, fileList)
    },
    // 文件上传之前调用做一些拦截限制
    beforeAvatarUpload (file) {
      const arr = file.name.split('.')
      const str = arr[arr.length - 1]
      const isFile =
        this._fileTypeList.filter(item => item.indexOf(str) > -1).length > 0
      this.$emit('_beforeAvatarUpload', file)
      // 先判断文件类型符不符合
      if (isFile) {
        // 再判断文件大小符不符合
        // 设置文件最大限制  , 以M为单位
        const isFileLimit = file.size / 1024 / 1024 < this.FileLimit
        if (isFileLimit) {
          return isFile && isFileLimit
        } else {
          // 如果文件大小不符合
          this.$message.warning(
            `你的文件已经超出了${this.newSize}的大小,请重新上传`
          )
          return isFileLimit
        }
      } else {
        // 如果文件类型不符合, FileTypeErrorText 文件提示内容
        this.$message.warning(
          `您的文件类型和上传的${this._fileTypeList}不一致请重新上传`
        )
        return isFile
      }
    },
    // 图片上传成功
    handleAvatarSuccess (res, file) {
      this.imgUrlArr.push(file)
      const arr = this.imgUrlArr
      this.$emit('_handleSuccess', res, file, arr)
    },
    // 点击主动发送请求
    submitUpload () {
      this.$refs.upload.submit()
    },
    // 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
    handleChange (file, fileList) {
      this.$emit('_handleChange', file, fileList)
    }
  }
}
</script>
<style scoped>
.MaxBox {
  width: 100%;
}
.img_example {
  display: flex;
  align-items: center;
  margin: 0 20px;
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
/* .uploadimage {
  width: 200px;
} */
.img_upload_line {
  display: flex;
}
.img_upload_box {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
</style>

 使用注意       上传地址 我是抽离出来的,然后还有上次token 也可以不传,
 但是地址是必传的

使用

 <upload
 	 // 侧边的文职
    _loadName="上传封面:"
    // 上传成功返回的函数
    @_handleSuccess="success"
 ></upload>

上面的代码特别简单,然后定义个函数 就得到上传返回的http的地址, 然后发送给后端就欧克了, 然后如果回显的话,我是做了一个盒子,然后覆盖在这个盒子上面,如果要删除的话就让这个盒子消失,让下面的盒子出来,一个讨巧的行为。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Element UI的el-upload组件是一个文件上传组件。根据官方文档和API,el-upload组件默认使用POST请求来发送文件,它会自动携带文件数据以及其他参数一起发送。你可以在Element-UI的官方网站上找到更多关于el-upload组件的详细信息。 如果你想要使用el-upload组件来实现文件上传,你可以按照官方文档提供的示例进行操作。确保你仔细阅读并理解示例中的代码,按照示例的步骤来进行配置和调用。当你成功上传文件后,你将能够在页面上看到相应的上传成功提示或者结果。祝你成功!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE之Element-ui文件上传详解](https://blog.csdn.net/weixin_48242257/article/details/124143182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue之element-ui文件上传](https://blog.csdn.net/viewyu12345/article/details/80850029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值