Web wiki

作者: GaoXiaoGao | 来源:发表于2021-02-25 10:55 被阅读0次

1.下载项目中的文件到电脑本地

将文件放在项目public文件夹file中,下载方法如下

      window.open('/file/表格字段模板.xlsx');

2.使用element upload控件如何限制上传文件的大小

<el-upload
                    style="margin-left: 35px"
                    drag
                    action="#"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-exceed="handleExceed"
                    :limit="1"
                    :on-remove="removeFile"
                    :on-error="uploadError"
                    :on-change="uploadChange"
                    :before-remove="beforeRemove"
                    accept=".xls, .xlsx"
                  >
                    <img width="66px" height="53px" src="@/assets/img/mark/upload.png" />
                    <div style="margin-top:20px;margin-bottom: 20px"><span style="color: #999999;font-size: 14px;">点击或将文件(xsl、xslx),拖拽到这里上传</span></div>
                    <div><el-button size="small" type="primary">点击上传</el-button></div>

                  </el-upload>

在uploadChange方法中进行判断

 //文件上传
      uploadChange(file, fileList) {
        const isLt2M = file.size <  1024 * 1024 *2;
        if (!isLt2M) {
          this.$message({
            showClose: true, // 是否显示关闭按钮
            duration: 2000, // 弹框显示时间,毫秒
            message: '上传文件大小不能超过 2MB!',
            type: 'error',
          });
        }

        if(isLt2M){
          this.uploadFile = file.raw || null;
        }else{
          //大小2M的文件从上传文件列表中删除
          fileList.splice(-1,1);
        }
      },

2.两张图片叠放在一起的方法

<div class="left-top" style="position:relative;background:#FFFFFF">
            <div style="position: absolute;">
              <img style="margin: 20px" height="17px" src="@/assets/img/mark/batch_text_two.png" />
            </div>
            <img width="100%" height="60px" src="@/assets/img/mark/top_bar_two.png" />
          </div>

这样前面的图片在后面图片的上面

3.Form形式上传文件

    upload(){
        this.loading = true;
        let formData = new FormData();
        formData.append('file', this.uploadFile);

        this.$http({
          method: 'post',
          url: '/xxx/xxx',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            'X-Requested-With': 'XMLHttpRequest',
          },
        }).then(res=>{
            this.loading = false;
       }) .catch((res)=>{
            this.loading = false;
          });
  }

相关文章

网友评论

      本文标题:Web wiki

      本文链接:https://www.haomeiwen.com/subject/xlvyfltx.html