上传图片文件封装_filerefsimg-优快云博客

这是一个关于Vue组件实现上传文件功能的示例，包括图片预览和文件类型的判断。组件内部使用了`el-upload`组件，并通过`getFileType`工具函数检查文件类型，支持图片、Excel、视频和音频。当文件上传前，会触发`before-upload`钩子，将文件转为base64并传递给父组件。父组件接收到文件数据后，可以调用API上传图片并预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传文件封装

components 里面的上传文件子组件

<template>
   <el-upload ref="uploadBox" class="upload-demo" drag action="*" :before-upload="handlebefore" :before-remove="handleremove" :on-exceed="handleexceed" :file-list="value" :auto-upload="true">
   </el-upload>
</template>

<script>
//引入utils里面的工具函数
import getFileType from "u/getFileType.js";
export default {
   data() {
      return {
         imageUrl: "",
         uploadData: {},
         value: []
      };
   },
   mounted() {
      this.value = [];
   },
   methods: {
      handlebefore(file) {
         let _this = this;
         let isimg = getFileType(file.name) == "image";
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e) {
            let fileObj = { h: 0, title: file.name, src: this.result, w: 0, image: isimg };
            _this.$emit("callbackComponent", {
               data: fileObj,
               function: "uploadFile"
            });
         };
         return false;
      },
      handleexceed() {},
      handleremove() {},
      openUpload() {
         this.$refs.uploadBox.$refs["upload-inner"].$refs.input.click();
      }
   },
   props: {
      // 接收到的数据属于“静态数据”，是单向数据，不能反向修改
      imgUrl: {
         type: String,
         default: ""
      },
      requestFlag: {
         type: Boolean,
         default: false
      }
   },
   watch: {}
};
</script>
<style lang="less">
.upload-demo {
   width: 0;
   height: 0;
   overflow: hidden;
}
</style>

utils里面的工具函数——上传文件

function getFileType(params) {
   // 后缀获取
   let suffix = '';
   // 获取类型结果
   let result = '';
   try {
      const flieArr = params.split('.');
      suffix = flieArr[flieArr.length - 1];
   } catch (err) {
      suffix = '';
   }
   // params无后缀返回 false
   if (!suffix) {
      return false;
   }
   suffix = suffix.toLocaleLowerCase();
   // 图片格式
   const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
   // 进行图片匹配
   result = imglist.find(item => item === suffix);
   if (result) {
      return 'image';
   }
   // 匹配 excel
   const excelist = ['xls', 'xlsx', 'doc', 'docx', 'ppt', 'pptx', 'pdf', 'txt'];
   result = excelist.find(item => item === suffix);
   if (result) {
      return 'word';
   }
   // 匹配 视频
   const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
   result = videolist.find(item => item === suffix);
   if (result) {
      return 'video';
   }
   // 匹配 音频
   const radiolist = ['mp3', 'wav', 'wmv'];
   result = radiolist.find(item => item === suffix);
   if (result) {
      return 'radio';
   }
   // 其他 文件类型
   return 'other';
}
export default getFileType;

父组件里引入上传文件子组件

<template>
<div>
	<UploadImg ref="UploadImg" class="UploadImg" @callbackComponent="callbackComponent" v-show="!previewImgObj.imgUrl"></UploadImg>
	<!-- $refs.UploadImg.openUpload() 点击图片后 可再次调起上传文件 -->
	<img :src="previewImgObj.imgUrl" alt="" v-show="previewImgObj.imgUrl" @click="$refs.UploadImg.openUpload()" class="showImg">
</div>
</template>
<script>
import UploadImg from "../../../components/personnel/upload/index";
export default {
  components:{
    UploadImg
  },
  data() {
    return {
    	previewImgObj:{},
    }
  },
  methods:{
	// 上传图片回调
    async callbackComponent(params) {
      // 图片上传接口
      const {data:resp} = await this.$api.postFileImage([params.data])
      if(resp.data.length !== 0){
        this.ruleForm.imgId = resp.data[0].id
      }
      // 将base64格式转换成图片，图片预览渲染在img标签里面
      function validDataUrl(s) {
        return validDataUrl.regex.test(s);
      }
      validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
      // 如果是base64转换成图片预览
      if (validDataUrl(params.data.src)) {
        let that = this;
        function previwImg(item) {
          //previewImgObj.imgUrl 是图片的src 放在img标签里面
          that.previewImgObj = {
            show: true,
            imgUrl: item
          };
        }
        previwImg(params.data.src)
      }
    }
  }
}
</script>