element文件上传功能的实现

这是使用element的文件上传组件

 <el-upload
            size="small"
            class="upload-demo"
            drag
            :on-change="handleChange"
             :file-list="fileList"
             action=''
             :auto-upload='false'
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <template v-slot:tip>
              <div class="el-upload-tip el-upload-tip--small" style="margin-bottom: 20px">
                只能上传xls文件,且不超过500kb<a style="cursor: pointer" href="http://kano.guahao-test.com/Wnx42440019?token=Mjk4MzQ4NDUzZDE2NjlhNjRlNTRhYWYwMzFmMDg2YjFfTUQ1COUSTOM"
                  >点击下载上传模板</a
                >
              </div>
            </template>
          </el-upload>

我们需要获取到上传的文件,这里定义了一个空的fileList来保存,怎么获取到这个filelist呢?
就是这个on-change绑定的方法

async handleChange (file) {
      this.fileList = [file]
    },

接下来是上传后对应的方法,这里使用的是formData的形式提交

async UploadFile () {
      if(this.fileList.length <= 0){
        this.$message.error('请选择文件');
        return
      }
      const formData = new FormData();
      formData.append('file', this.fileList[0].raw)
      this.$weRequest('/health/import', {
        name: 'upload',
        method: 'POST',
        requestType: 'form',
        data:formData,
        hooks: {
          success : [
            (res) => {
              this.failedNum  = res.data.errorCount ;
              this.sucessNum = res.data.successCount ;
            }
          ],
        },
      });
      this.showResult = true;
    },

这里使用的是封装的请求,生成了一个 boundary 字段, Content-Type 里指明了数据是以 mutipart/form-data 来编码

文件上传前格式和文件大小的限制

 :before-upload="beforeAvatarUpload"

以支持扩展名:doc .docx .pdf .jpg,文件不超过20M 为例

beforeAvatarUpload(file) {
      const type = file.name.split('.');
      const isJPG = type[1] === 'jpeg' || type[1] === 'jpg';
      const isDoc = type[1] === 'doc';
      const isDocx = type[1] === 'docx';
      const isPdf = type[1] === 'pdf';
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isDoc && !isDocx && !isPdf) {
        this.$message.error('格式不符,请重新选择');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!');
        return false
      }
      return (isJPG || isDoc || isDocx || isPdf) && isLt2M;
    },
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 中进行文件上传,可以使用 `el-upload` 组件。下面是一个简单的示例: ```html <template> <el-upload class="upload-demo" action="/your-upload-api" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选择文件</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div> </el-upload> </template> <script> export default { methods: { // 文件上传前的钩子函数,返回 false 可以阻止上传 beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' const isLt500K = file.size / 1024 < 500 if (!isJPG) { this.$message.error('只能上传 JPG/PNG 格式的图片') return false } if (!isLt500K) { this.$message.error('上传图片大小不能超过 500KB') return false } return true }, // 文件上传成功的回调函数 handleSuccess(response, file, fileList) { console.log(response) } } } </script> ``` 在这个示例中,我们使用了 `el-upload` 组件,并设置了一些属性: - `action`:上传文件的地址 - `on-success`:文件上传成功的回调函数 - `before-upload`:文件上传前的钩子函数 - `auto-upload`:是否自动上传文件,我们这里设置为 `false`,也就是说需要手动点击上传按钮才会上传文件 同时,我们还使用了插槽来自定义上传按钮和提示文本。 需要注意的是,上传文件的地址需要根据实际情况进行修改,同时也需要在后端进行相应的处理,接收并保存上传的文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值