element el-upload 自定义上传服务器参数

              <el-upload
                action=""
                list-type="picture-card"
                :http-request="upload"
                :file-list="fileList"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeUpload"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过5M</div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>




    upload(file) {
      const formData = new FormData();
      formData.append('file', file.file);
      formData.append('remark', '上传');
      formData.append('parentId', this.$route.query.mid);
      const xhr = new XMLHttpRequest();
      xhr.open('post', '/fileUpload', true);
      xhr.setRequestHeader('Authorization', localStorage.Authorization);
      xhr.onload = (res) => {
        const response = JSON.parse(res.target.response);
        const item = { name: file.file.name, url: `http://${response.payload}`, uid: file.uid };
        this.fileList.push(item);
      };
      xhr.onerror = () => {
        console.log('上传失败');
      };
      xhr.ontimeout = function timeout() {
        console.log('上传超时,请刷新重试');
      };
      xhr.send(formData);
    },
    beforeUpload(file) {
      const isAllow = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isAllow) {
        this.$q.notify({
          message: '图片只能是 jpg/png 格式!',
          color: 'negative',
        });
      }
      if (!isLt5M) {
        this.$q.notify({
          message: '图片大小不能超过 5MB!',
          color: 'negative',
        });
      }
      return isAllow && isLt5M;
    },
    handleRemove(file) {
      const index = this.fileList.findIndex((v) => v.uid === file.uid);
      if (index > -1) {
        this.fileList.splice(index, 1);
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload组件的上传文件参数包括以下几个选项: 1. action: 上传的接口地址,即文件上传到哪个服务器端的地址。可以是一个字符串,也可以是一个函数。 2. name: 上传文件的字段名。在后端接收文件时,使用该字段名来获取文件。 3. http-request: 自定义上传方法。可以是一个函数,用于自定义上传文件的方式。可以在该函数中处理一些额外的逻辑,比如上传前的验证等。 4. on-success: 上传成功的回调函数。该函数接收三个参数:response、file和fileList。response是上传成功后服务器端返回的数据,file是当前上传的文件对象,fileList是已上传文件的列表。 总结起来,el-upload组件的上传文件参数包括action、name、http-request和on-success。其中,action决定了文件上传到哪个服务器地址,name指定了上传文件的字段名,http-request用于自定义上传逻辑,on-success是上传成功后的回调函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [element el-upload 部分参数详解](https://blog.csdn.net/Sophiego/article/details/86702536)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值