上传活动资料

<p>&lt;el-button @click=&quot;dialogVisible3 = true&quot;&gt;
上传
</el-button>
<el-dialog title='活动资料' :visible.sync="dialogVisible3" width="680px" center>
<div style="max-height: 70vh;overflow-y: scroll;">
/<em>自定义上传事件 http-request</em>/
<el-upload ref="upload" class="upload-demo" drag action :http-request="success" :before-upload="beforeAvatarUpload"
multiple>
<div class="el-upload__text"><em style="margin-right: 10px">选择文件</em>或者将文件拖入框内</div>
<div class="el-upload__tip" slot="tip">提示：支持上传文件格式：doc，docx，ppt，pptx，xls，xlsx，pdf，单个文件大小在50M以内。</div>
</el-upload>
<div class="my-upload-list">
<div v-for="(item,index) in urlList">
<div>
<i class="el-icon-s-order my-file"></i><span>{{item.name}} <span v-if="item.size!= '' ">{{'('+item.size+')'}}</span></span>
&lt;span class=&quot;my-close&quot; @click=&quot;delList(item.id)&quot;&gt;删除</span>
&lt;span class=&quot;show-flie-open&quot; @click=&quot;showFile(item.path)&quot;&gt;预览</span>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center;">
&lt;el-button @click=&quot;dialogVisible3 = false&quot;&gt;取 消</el-button>
&lt;el-button type=&quot;primary&quot; @click=&quot;dataSruse&quot;&gt;确 定</el-button>
</div>
<el-dialog title='文件预览' :visible="showDoc == true || showPdf == true  || showImg == true" :width="fileWidth" class="dialog-div-pre-style"
:before-close="closePreviewClick" center append-to-body></p>
<pre><code>				&lt;div v-if=&quot;showDoc == true&quot;&gt;
					&lt;iframe frameborder=&quot;0&quot; :src=&quot;'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl&quot; width='100%'
					 height=&quot;800px&quot;&gt;
					&lt;/iframe&gt;
				&lt;/div&gt;
				&lt;div v-else-if=&quot;showPdf == true&quot;style=&quot;justify-content: center; align-items: center&quot;&gt;
				/*这个是HTML 5 中的新标签*/
					&lt;embed :src=&quot;pdfUrl&quot; style=&quot;width: 100%; height: 80vh&quot; /&gt;
				&lt;/div&gt;
				&lt;div v-else-if=&quot;showImg == true&quot; style=&quot;justify-content: center; align-items: center;min-width: 40px;min-height: 40px;&quot;&gt;
					&lt;img :src=&quot;imagesUrl&quot; alt=&quot;&quot; style=&quot;width: 100%;height: auto;&quot;&gt;
				&lt;/div&gt;
			&lt;/el-dialog&gt;
		&lt;/el-dialog&gt;
</code></pre>
<script>
export default {
  data() {
    return {
      dialogVisible3: false,
      urlList: [],
      fileUrl: '',
      pdfUrl: '',
      imagesUrl: '',
      showDoc: false,
      showPdf: false,
      showImg: false,
      fileWidth: '70%',
      maxSize: 50 * 1024 * 1024,
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      const isDoc =
        file.type === 'application/msword' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
        file.type === 'application/vnd.ms-powerpoint' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/pdf';
      if (!isLt50M) {
        this.$message.error('上传文件大小不能超过 50MB!');
      }
      if (!isDoc) {
        this.$message.error('上传文件格式错误!');
      }
      return isLt50M && isDoc;
    },
    success(response, file, fileList) {
      if (response.code === 0) {
        this.urlList.push({
          id: response.data.id,
          name: response.data.name,
          size: this.formatBytes(response.data.size),
          path: response.data.path,
        });
        this.$message.success('上传成功');
      } else {
        this.$message.error(response.message);
      }
    },
    formatBytes(bytes, decimals = 2) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const dm = decimals < 0 ? 0 : decimals;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    },
    delList(id) {
      const that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          that.$axios({
            url: '/file/delete',
            method: 'DELETE',
            params: {
              id,
            },
          })
            .then((res) => {
              if (res.data.code === 0) {
                that.$message.success('删除成功');
                that.urlList = that.urlList.filter((item) => item.id !== id);
              } else {
                that.$message.error(res.data.message);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    showFile(path) {
      const type = path.split('.').pop();
      if (type === 'doc' || type === 'docx' || type === 'ppt' || type === 'pptx' || type === 'xls' || type === 'xlsx') {
        this.showDoc = true;
        this.showPdf = false;
        this.showImg = false;
        this.fileUrl = path;
        this.fileWidth = '70%';
      } else if (type === 'pdf') {
        this.showDoc = false;
        this.showPdf = true;
        this.showImg = false;
        this.pdfUrl = path;
        this.fileWidth = '80%';
      } else if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'gif') {
        this.showDoc = false;
        this.showPdf = false;
        this.showImg = true;
        this.imagesUrl = path;
        this.fileWidth = '60%';
      } else {
        this.$message.error('该文件不支持预览');
      }
    },
    dataSruse() {
      const urlList = this.urlList.map((item) => {
        return {
          id: item.id,
          name: item.name,
          path: item.path,
        };
      });
      this.$emit('uploadSuccess', urlList);
      this.dialogVisible3 = false;
    },
    closePreviewClick(done) {
      this.showDoc = false;
      this.showPdf = false;
      this.showImg = false;
      done();
    },
  },
};
</scrip