antd vue 中上传 a-upload

添加beforeUpload,控制大小等,remove用于删除,file-list存放上传的文件:

 <a-upload
                name="file"
                v-decorator="[
                  'file',
                  {
                    rules: [{ required: true, message: '请上传文件' }],
                  },
                ]"
                accept=".jpg,.png,.bmp"
                :file-list="fileList"
                  :before-upload="beforeUpload"
                  :remove="handleRemove"
                :customRequest="customRequest"
              >
                <div class="ant-upload-preview">
                <img class="cover" :src="imageUrl" @error="setDefaultImage" />
              </div>
              </a-upload>
    beforeUpload(file) {
      let MSize=1024*1024
      let fileSize =file.size;
      var size = fileSize /MSize;
      if(size>5){
         this.$message.error('文件大小控制在5M内')
         return false
      }else{
        this.fileList = [file];
      }
    },
    setDefaultImage(e) {
      e.target.src = require("/src/assets/img/emptypic.png");
    },
     handleRemove(file){
        this.fileList=[]
        this.file=null
        this.form.setFieldsValue({file:null})
        this.option.img=require('/src/assets/img/emptypic.png')
        return true
      },
      customRequest(file){
        this.file=file
        this.handleUpload(file)
      },
      handleUpload(filedto) {
          if(filedto){
            const _this = this
            let file=filedto.file
            const formData = new FormData()
            let ext = file.name.replace(/.+\./, "")
            let name=file.name
            let blob=new Blob([file])
            formData.append('type',ext)
            formData.append('file', blob,name)
            uploadPic(formData).then(res={
                  ...
                  let URL = window.URL || window.webkitURL; // 获取当前域名地址
                  _this.imgUrl = URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址,                    回显本地图片
            })
      }

  • 10
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值