el - 上传组件

已于 2023-03-28 17:42:34 修改
阅读量212 收藏
点赞数
分类专栏： VUE 文章标签： vue.js javascript html
于 2023-03-27 12:01:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39255905/article/details/129792453
版权 
<template>
<div class="freePic">
<!--  -->
	<el-upload
        class="avatar-uploader"
        :list-type="uploadType"
        :action="fileuploadUrl"
        :file-list="fileList"
        :before-upload="fileChange"
        :on-success="uploadSuccess"
        :on-error="uploadFiled"
        :on-exceed="overfileuploadNumber"
        :beforeRemove="fileBerofeRemove"
        :on-remove="fileRemove"
        :limit="limit"
        :disabled="!isShow"
        :on-preview="handlePictureCardPreview"
        :class="{hide:hideUpload}"
	>
    <i class="el-icon-upload"  v-if="isShow" style="font-size: 50px;line-height: 1.5;"><p style="font-size: 19px;font-weight: lighter">点击上传</p></i>
<!--    <el-button style="margin-left: 10px;" size="mini"  type="success" v-if="isShow" >点击上传</el-button>-->
	</el-upload>
  <div slot="tip" v-if="isShow" class="el-upload__tip">【请上传 {{this.suffixList.join('、')}} 文件, {{fileSize?'单个文件最大'+fileSize+'MB,':''}}<span style="color: red"> 上传{{limit?'最多'+limit:'可多'}}个</span>】</div>
    <!-- 图片放大展示 -->
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>
</template>
<script>
import fileApi from '@/api/file-api';
export default {
	/* 图片展示 upload */
	name: "upload-pic-card",
    props: {
        /* v-model绑定的值 */
        value: {
            type: Array,
            default: () => []
        },
        /* 上传文件类型*/
        uploadType:{
          type: String,
          default: ''
        },
        //上传文件位置URL路径-分类
        uploadUrl: {
            type: String
        },
        /* 限制上传数量*/
        limit: {
            type: Number,
            default: null
        },
        /* 允许上传文件的后缀类型 */
        suffixList:{
          type:Array,
          default(){
            return []
          }
        },
        /* 允许上传文件的-大小 */
        fileSize:{
          type:Number,
          default: null
        },
        /* 是否服务端删除图片 */
        serverdel: {
            type: Boolean,
            default: true
        },
      disabled: {
        type: Boolean,
        default: false
      },
      isShow:{
        type: Boolean,
        default: false
      }
    },
	data() {
		return {
			dialogImageUrl: "",//展示地址链接
			dialogVisible: false,
      fileList: this.value,
      fileuploadUrl: fileApi.uploadFiles( `uploadChildPath=${this.uploadUrl}`), // 上传文件地址
		};
	},
  computed: {
    // 上传张数大于限制张数的时候将上传框隐藏
    hideUpload() {
      return !this.isShow;
    }
  },
     watch: {
        value: function(n) {
            this.fileList = n
            // 修改 v-model 数据
            this.$emit('input', n)
        },
    },
  methods: {
        //放大展示
		handlePictureCardPreview(file) {
			// this.dialogImageUrl = file.url;
			// this.dialogVisible = true;
      this.$emit("preview",file.url);
		},
         // 上传文件 改变时
         // 文件上传成功
        uploadSuccess(response, file, fileList) {
		      this.$emit("warrantySuccess",response)
          this.$emit('repairSuccess',response)
          this.$emit('upkeepSuccess',response)
            const { raw } = file
            const { data,  success} = response
            const { type } = raw;
            if(success && data) {
              data.map(item=>this.fileList.push({name: item.fileName, url: item.url, type: 'image'}))
                // this.fileList.push({name: data[0].fileName, url: data[0].url, type: 'image'})
                this.$message({message: '文件上传成功', type: 'success',duration: 2000})
            } else {
                this.$message({message: '文件上传失败', type: 'warning',duration: 2000})
                fileList.pop()
            }
            // this.loading = false
            // 修改 v-model 数据
            this.$emit('input', this.fileList)
            if (this.limit&&this.fileList.length >= this.limit) {
              document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'none';
            }
        },
        // 图片改变时大小类型验证
        fileChange(file) {
            // if(file.status === "ready") {
                // 文件准备就绪未上传
                /*
                    image/jpeg
                    image/png
                    const isJPG = file.type === 'image/jpeg';
                */
                const FileExt = file.name.replace(/.+\./, "");
                const isLt5M = this.fileSize?file.size / 1024 / 1024 > this.fileSize:false;
                if (this.suffixList.length>0&&this.suffixList.toString().toLowerCase().indexOf(FileExt.toLowerCase()) === -1) {
                  this.$message({
                    type: 'warning',
                    message: `请上传后缀名为${this.suffixList.join(',')}文件！`
                  });
                  return false;
                }else {
                    if(isLt5M) {
                        this.$notify.error({
                            title: '异常',
                            message: `上传图片大小不能超过 ${this.fileSize}MB!`,
                            duration: 2000
                        });
                        return false
                    }else {
                      return true
                    }
                }
            // }
        },
        // 文件超出上传个数
        overfileuploadNumber(file, fileList) {
            this.$notify.error({
                title: '异常',
                message: `文件最多上传${fileList.length}个`,
                duration: 2000
            });
        },
        // 文件在列表被移除前
        async fileBerofeRemove(file, fileList) {
            if(file.status === 'success') {
              // console.log(!this.serverdel)
                return new Promise((resvole, reject) => {
                    if(!this.serverdel) {
                        resvole()
                        return
                    }
                    this.$confirm('该操作删除文件后不可找回，请谨慎操作?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(res =>{
                        Promise.all([fileApi.delServerFile({url: file.url}), file.id? fileApi.delete({id: file.id}):'']).then(res => {
                            const [resOne, resTwo] = res;
                            this.$message({type: 'success', message: '文件删除成功',duration: 2000})
                            resvole()
                        }).catch(err => {
                            this.$message({type: 'error', message: '文件删除失败',duration: 2000})
                            reject()
                        })
                    }).catch(err => console.log(err))
                })
            }
            if(file.status === "uploading") {
                this.$message({type: 'warning', message: '文件上传被取消',duration: 2000})
                // this.loading = false
            }
        },
         // 文件在列表被移除后
        fileRemove(file, fileList) {
          // this.fileList = this.fileList.filter(item => item.uid !== file.uid); // 删除时候过滤掉被删除的内容
            /*const index = this.fileList.findIndex(item => item.uid === file.uid)
            this.fileList.splice(index, 1)*/
            this.fileList=fileList
            // 修改 v-model 数据
            this.$emit('input', this.fileList)
            if (this.fileList.length>0&&this.fileList.length < this.limit) {
              document.getElementsByClassName('el-upload--picture-card')[0].style.display='';
            }
        },
        // 文件上传失败
        uploadFiled(err, file, fileList) {
            this.$message({message: '文件上传失败', type: 'warning',duration: 2000})
            this.loading = false
        },
        //获取文件名称
        getFileName(url) {
          let name = "";
          if (url && url !== "") {
            name = url.substring(url.lastIndexOf("/") + 1);
          } else {
            name = "无";
          }
          return name;
        },

	},
};
</script>
<style lang="scss" scoped>

.freePic ::v-deep .hide .el-upload--picture-card {
  display: none;
}
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

2. 调用

<uploadPicAcard uploadUrl="userDows/goods/test" v-model="goodsImgUrlList" :fileSize="5" :suffixList="suffixList_1" :uploadType="'picture-card'" :limit="8" :isShow="viewType" @preview="preview"/>

 // 文件预览组件 
 <FilePreviewComp ref="fpc"></FilePreviewComp>


import FilePreviewComp from "@/components/file-preview";
export default {
    name: 'goods-info-page',
    data() {
        return {
            suffixList_1:['jpg','png'],
             /* 货物图片 */
            goodsImgUrlList: [],
            viewType:false,
components: {FilePreviewComp },

    methods: {
      //文件预览 (1. 需要添加class：【message_box_alert】)
      preview(val){
        this.$refs.fpc.preview(val);
      },
    }

 3. 预览组件 (创建组件)

<style>
.el-dialog--center .el-dialog__body{
  padding: 0 30px;
}
.el-dialog__body {
  padding: 0;
  overflow-y: auto;
  height: calc(100vh - 50px) !important;
}
</style>

<template>
	<div v-if="typeS == '1'">
    <el-dialog
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :destroy-on-close="dialogDestroy"
        :fullscreen="true"
        width="100%"
        center>
      <h1 slot="title" class="title-h1">{{title}}</h1>
      <iframe width="100%" height="98%" :src="previewUrl"/>
    </el-dialog>
	</div>

  <div v-else-if="typeS == '2'">
    <viewimg-comp ref="viewimgcomp" :options="{image: previewUrl, smallImgShow: false, imgHeight: '40px'}" ></viewimg-comp>
  </div>

  <div v-else>
    <el-dialog
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :destroy-on-close="dialogDestroy"
        :fullscreen="true"
        center
    >
      <h1 slot="title" class="title-h1">{{title}}</h1>
      <iframe width="100%" height="98%" :src="previewUrl"/>
    </el-dialog>
  </div>
</template>



<script>

import {matchType} from "@/utils/utils";
import fileApi from "@/api/file-api";

export default {
  props:{
   /* previewUrl: {
      type: String,
      default: ''
    },*/
  },
  data(){
    return {
      title:'文件预览',
      typeS:'0',
      dialogDestroy:true,
      dialogFormVisible: false,
      previewUrl:'',
    }
  },
  mounted() {
  },
  methods: {
  /*  preview(val){
      // 这里需要取下 html 的高度，因为浏览器有默认的 margin
      const html = document.body.parentElement
      const scrollHeight = `${html ? html.scrollHeight-130 : document.body.scrollHeight-130}px`
      // const scrollWidth = `${html ? html.scrollWidth : document.body.scrollWidth}px`
      this.$alert(`<iframe style="padding: 0;margin: 0" width="100%" height="${scrollHeight}" src="${fileApi.onlinePreview(val)}"/>` , '预览', {
        dangerouslyUseHTMLString: true,
        customClass:'message_box_alert'
      });
    },*/
    // 文件预览
    preview(val){
      if (matchType(val) === "pdf"){
        this.typeS='1'
        this.previewUrl=val;
      }else if (matchType(val) === "image"){
        this.typeS='2'
        this.previewUrl=val;
        // 调用子组件的方法
        setTimeout(() => {
          return this.$refs.viewimgcomp.show()
        }, 100);
      }else {
        this.previewUrl=`https://view.officeapps.live.com/op/view.aspx?src=${val}`
      }
      this.dialogFormVisible = true
    }
  }
}


</script>
<style lang="scss" scoped>
/*.message_box_alert {
  word-break: break-all !important;
  width: 100%;
}*/
.title-h1{
  font-size: 17px;
  color: #000000;
}
</style>


/*根据文件名后缀区分 文件类型*/
export const matchType = fileName => {
    // 后缀获取
    var suffix = '';
    // 获取类型结果
    var result = '';
    try {
        var flieArr = fileName.split('.');
        suffix = flieArr[flieArr.length - 1].toLowerCase();
    } catch (err) {
        suffix = '';
    }
    // fileName无后缀返回 false
    if (!suffix) {
        result = false;
        return result;
    }
    // 图片格式
    var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
    // 进行图片匹配
    result = imglist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'image';
        return result;
    };
    // 匹配txt
    var txtlist = ['txt'];
    result = txtlist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'txt';
        return result;
    };
    // 匹配 excel
    var excelist = ['xls', 'xlsx'];
    result = excelist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'excel';
        return result;
    };
    // 匹配 word
    var wordlist = ['doc', 'docx'];
    result = wordlist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'word';
        return result;
    };
    // 匹配 pdf
    var pdflist = ['pdf'];
    result = pdflist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'pdf';
        return result;
    };
    // 匹配 ppt
    var pptlist = ['ppt'];
    result = pptlist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'ppt';
        return result;
    };
    // 匹配 视频
    var videolist = ['mp4', 'm2v', 'mkv'];
    result = videolist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'video';
        return result;
    };
    // 匹配 音频
    var radiolist = ['mp3', 'wav', 'wmv'];
    result = radiolist.some(function (item) {
        return item == suffix;
    });
    if (result) {
        result = 'radio';
        return result;
    }
    // 其他 文件类型
    result = 'other';
    return result;
}

oh LAN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
多个el-upload组件上传方式
u010613970的博客
06-16 1810
今天写项目的时候，有个新需求，通过后台返回的数据遍历元素，而这个元素刚好是需要上传文件的元素，那这时候应该怎么操作了，网上找不一下，找到个比较简便的方法，当场记录下来 <!-- 最外层是有一个v-for的，只是我这里没写上 --> <el-upload class="avatar-uploader" action="/apis/api/common/uploadImage" :show-file-list="false" :on-success="function (res, file){
el-upload实现上传文件夹(批量上传文件)，支持按钮式触发click()唤起上传弹窗（有助于少写一些el-upload节点，做到写一个el-upload组件多处使用）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-14 3655
/让el-upload支持上传文件夹。【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度_你挚爱的强哥的博客-CSDN博客。【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度。el-upload实现上传文件夹(批量上传文件)：关键代码在于。sgUploadTray组件在这里。
EL文件上传
weixin_43985399的博客
06-02 445
文件上传与时间参数传递
el-upload多个文件，动态增加+预览word 、excel、ppt、pdf、png、jpg文件
m0_49471668的博客
05-24 2377
el-upload多个文件，动态增加 <template> <span> <el-row v-for="(v, i) in RecordOperation.upload" :key="i"> <el-col :span="6"> <el-form-item> <el-input v-model.trim="v.fileName" ..
vue+elementUI中使用el-upload进行图片上传
seimeii的博客
09-14 237
vue+elementUI中使用el-upload进行图片上传
vue + element组件 el-upload图片上传
余白x的博客
08-20 311
效果图： html片段： action是上传图片的地址，用 “#” 占位 <el-upload class="avatar-uploader" action="#" name="qrCode" :headers="headers" :show-file-list="false" :on-success="ha...
(Vue+SpringBoot)使用ElementUi的el-upload上传更新用户头像
CosecantY的博客
10-07 4169
实现功能如下： 点击修改按钮后选择本地文件 点击打开后修改成功，头像修改完毕。 ------------------------------------------------- Vue代码： <el-upload class="avatar-uploader" action="http://localhost:8080/users/updateHeadPortrait" :show-file-list="false" :on-success="hand..
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件--el-upload 实现上传Excel文件的实例 elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-...
el-upload组件中使用el-button都会触发上传事件的问题
Z_ckiy的博客
11-03 2926
<el-upload class="upload-demo" :action="baseUrl + '/api/localStorage' + '?name='+fileName" :headers="headers" :before-upload="beforeUpLoad" multiple accept=".xls,.xlsx" :auto...
记录一个element上传附件，包含视频图片以及word，ppt，execl的上传插件
最新发布
weixin_45737732的博客
11-06 157
【代码】记录一个element上传附件，包含视频图片以及word，ppt，execl的上传插件。
SpringBoot+Vue实现个人信息以及头像数据联动
不愧是暮言的博客
02-10 4890
我们在进行功能实现的时候，个人信息是极其重要的一部分。不仅能展示用户的信息给用户，还能让我们的项目更多元化，让用户的体验感得到提升。我们后端利用SpringBoot整合Mybaties-plus获取数据库里面的user表数据，前端利用Vue调用后端接口进行数据渲染。
element-ui upload 实现带token上传 以及action该怎么写
c327127960的博客
02-09 4574
element-ui upload 实现带token上传 以及action该怎么写
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
weixin_47192981的博客
02-01 3884
2.2通过on-change来监控传入文件的状态，当上传的文件大小（beforeAvatarUpload函数）以及格式（html代码里面的accept属性）达到了我们的目标要求后就可以将文件进行转换，之后在传给后端。查阅element ui的头像上传功能，发现是点击头像位置才可以上传，那我们可不可以点击头像外部的按钮来上传头像呢？当我们明白每个标签的含义之后，我们就可以通过调整img标签的位置来达到自己的目标效果。下图为目标效果图的代码：html+css布局。2、文件转base64（html代码见上图）
el-upload文件上传组件的封装
博客简介
04-25 930
vue2 中对ElementUI上传组件封装，实现快速开发
前端服务器图片地址转换为base64,转为文件类型
strongbuger的博客
04-23 790
//获取图片的服务器url地址 方法调用 if(this.fileUrlList.length>0){ for(var i=0; i<this.fileUrlList.length;i++){ this.getBase64Image(this.fileUrlList[i].url); } } //url转base64 ...
element-ui中的图片墙的使用和注意点
weixin_47746653的博客
08-30 659
element-ui图片墙
【vue】表单校验之上传文件校验
Write less，do more
01-18 2221
问题描述：正常吧fileList放在payForm里面的话，验证每次输入其他input都会导致上传文件的刷新 所以需要把保存文件和验证文件分开存储，来验证，这样才能不出现界面BUG <el-form ref="payForm" :model="payForm" :rules="payFormRules" label-width="150px"> <el-form-item label="支付款项账号：" prop="pay_account"> &
element upload上传文件-自定义上传方式
weixin_44313037的博客
08-18 3085
elementui修改默认文件上传方式
el-upload组件 formFile文件上传
04-07
el-upload组件是Element UI中的一个上传组件，支持多种上传方式，包括文件上传、图片上传、拖拽上传等。 formFile文件上传是一种通过表单提交文件的方式进行上传。在el-upload组件中，可以通过设置action属性来指定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oh LAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值