vue+element-ui上传文件部分代码（记录）

最新推荐文章于 2022-11-14 15:44:29 发布

aholic.895

最新推荐文章于 2022-11-14 15:44:29 发布

阅读量285

点赞数

文章标签： elementui 前端 vue.js

本文链接：https://blog.csdn.net/qq_62884240/article/details/125525002

版权

<template>
  <div>
    <div class="table-operator" style="margin-top: 5px">
      <el-card class="box-card card">
        <el-row class="card-row-body bg-white">
          <el-col class="no-border action-col-right">
            <a-button @click="handleAdd" type="primary" size="small" icon="plus" class="newBtn">新增</a-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    文件上传
    <div class="mutiple">
      <el-dialog title="上传文件" :visible.sync="dialogMultipleVisible" width="600px" :append-to-body="true">
        <div class="grid-content bg-purple">
          <form action="" ref="upload" name="uploadFile">
            <!--                <input type="file" name="file">-->
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              drag
              multiple
              :on-preview="handlePreview"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :on-error="uploadError"              
            >
              <!-- <el-button size="small" type="primary">上传文件</el-button> -->
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </form>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button size="small" @click="dialogMultipleVisible = false">取 消</el-button> -->
          <!-- <el-button size="small" type="primary" @click="dialogMultipleVisible = false">确定</el-button> -->
        </div>
      </el-dialog>
    </div>

    <!-- <el-upload
      class="upload-demo"
      ref="upload"
      multiple
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-success="uploadSuccess"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>     
    </el-upload> -->
  </div>
</template>

<script>
import { postAction, getAction, deleteAction } from '@/api/manage'
export default {
  name: 'SystemUploadFile',

  data () {
    return {
      fileList: [],
      dialogMultipleVisible: false,
    };
  },

  mounted () {

  },

  methods: {
    handleAdd () {
      this.dialogMultipleVisible = true;
    },
    submitUpload () {
      this.$refs.upload.submit();
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    uploadSuccess (response, file, fileList) {
      this.dialogMultipleVisible = false;
      this.$message.success('上传成功');
      console.log('上传成功',fileList);
      //   this.getDiningList();
    },
    uploadError(){
        this.dialogMultipleVisible = false;
        this.$message.error('文件上传失败');
    }

  },
};
</script>

<style lang="scss" scoped>
/deep/.el-upload{
    width: 100% !important;
}
/deep/.el-dialog__body {
    padding: 10px 30px !important;
}
/deep/.el-upload-dragger{
    width: 100%;
}
</style>