Vue+element-ui上传文件及进度显示

作者: 他爱在黑暗中漫游 | 来源:发表于2019-04-30 17:38 被阅读0次

Vue+element-ui上传文件及进度显示
VUE3（二十七）自定义upload上传组件（显示上传进度）
servlet上传文件+上传进度显示
网站地址
Vue Axios Post Upload File
antd vue upload组件使用customRequest
Structs下上传文件进度显示
文件上传，显示进度条
上传文件时弹窗只展示指定文件格式的文件而不是所有文件
iOS——UIProgressView在工程中的简单应用

demo代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传文件</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .image-preview {
      width: 178px;
      height: 178px;
      position: relative;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      float: left;
    }

    .image-preview .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .image-preview .image-preview-wrapper img {
      width: 100%;
      height: 100%;
    }

    .image-preview .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .5);
      transition: opacity .3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
    }

    .image-preview .image-preview-action .el-icon-delete {
      font-size: 32px;
    }

    .image-preview:hover .image-preview-action {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div id="app">

    <el-upload v-show="imageUrl.length < 1" 
      class="avatar-uploader"
      :action="serverUrl"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-progress="uploadProcess">
      <i v-show="imageUrl =='' && imgFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
      <el-progress v-show="imgFlag == true" type="circle" :percentage="percent" style="margin-top: 20px"></el-progress>
    </el-upload>

    <div class="image-preview" v-show="imageUrl.length > 1">
      <div class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
          <i @click="handleRemove" class="el-icon-delete"></i>
        </div>
      </div>
    </div>

  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        serverUrl: "xxx", // 后台上传接口
        imgFlag: false,
        percent: 0,
        imageUrl: '',
      };
    },
    mounted() {},
    methods: {
      handleRemove(file, fileList) {
        this.imageUrl = '';
      },
      beforeUpload(file) {
        const isLt10M = file.size / 1024 / 1024  < 10;
        if (
          ['image/jpeg',
            'image/gif',
            'image/png',
            'image/bmp'
          ].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的图片格式');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传图片不能超过10MB哦!');
          return false;
        }
      },
      handleSuccess(res, file) {
        this.imgFlag = false;
        this.percent = 0;
        if (res) {
          this.imageUrl = URL.createObjectURL(file.raw); // 项目中用后台返回的真实地址
        } else {
          this.$message.error('视频上传失败，请重新上传！');
        }
      },
      uploadProcess(event, file, fileList) {
        this.imgFlag = true;
        console.log(event.percent);
        this.percent = Math.floor(event.percent);
      },
    }
  })
</script>

</html>