Vue文件上传前端代码

祈祷平安,加油

已于 2024-04-14 18:41:42 修改

阅读量173

点赞数 1

分类专栏： Vue+ElementUI前端框架问题文章标签： vue.js javascript 前端

于 2024-04-14 11:59:18 首次发布

本文链接：https://blog.csdn.net/qq_31016939/article/details/137740963

版权

Vue+ElementUI前端框架问题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中使用el-upload组件进行文件上传，包括模板结构、事件处理函数和父子组件通信，以及如何在form表单中引用和控制上传行为。

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

一、编码上传组件

<template>
    <div>
      <div v-for="item in list" style="width:100%;display: flex;">
        <label style=" font-weight: 550;width: 185px; font-size: 12px;text-indent: 2em;color: #333;line-height: 32px;">{{item.label}}</label>
        <span style="margin-left: 20px;width: 72%;display: inline-block;">
             <el-upload
               :action="'/fosung-village-shandong/api/common/upload_files?fk=2qu2r9hppsittpkpsgnrtf40ka'"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :limit="10"
               :on-success="success"
               :on-error="error"
             accept=".png,.pdf,.jpg,.jpeg,.doc,.xls"
               :before-upload="beforeUpload"
               :file-list="fileList"
               class="upload-demo"
            style="width: 100%;"
               multiple>
            <button-base text="上传文件" type="primary" :disabled="disabled"/>
          </el-upload>
          </span>
      </div>
    </div>
</template>

<script>
  import buttonBase from '../../components/Button/support/button-base'
  export default {
    props:['list','fileList',"index"],
    components:{
      buttonBase
    },
    data(){
      return{
        // fileList:[],
        uploadList:[],
        disabled:true,
      }
    },
    methods:{
      success(res){
        if(res.code == 200){
          res.data.files.forEach(file =>{
            this.fileList.push({
              name: file.attaName,
              url: file.fullPath,
              attaPath: file.attaPath,
              id: '',
              operFlag: '0'
            })
          })
          this.$emit('sendFile',this.fileList)
          this.$emit('controll',false,this.index)
        }else{
          this.fileList.splice(Number(this.fileList.length-1),1)
          this.$notify({
            title: '失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      },
      beforeUpload(res){
        this.$emit('controll',true)
      },
      error(err){
        console.log(err,'1111')
      },
      handleRemove(file, fileList) {
        for (let i = 0; i < this.fileList.length; ++i) {
          if (file.id == this.fileList[i].id) {
            this.fileList[i].operFlag = 1
          }
        }
        this.$emit('sendFile',this.fileList)
      },
      handlePreview(file){
        var index = file.name.lastIndexOf('\.')
        const data = file.name.substring(index + 1, file.name.length)
        window.open(file.url)
      },
      parentMsg(data){
        this.disabled = data;
      }
    }
  }
</script>

<style scoped>

</style>

二、导入上传组件

import upload from './upload'//上传
在form表单中引用
<div v-if="table.type == 'upload'" style="display: flex;">
  <upload :list="uploadList" :fileList="fileList" ref="upload"         @controll="controll" :index="index"  
     @sendFile="acceptFile"></upload>
</div>