您的当前位置:首页正文

antd vue 中上传 a-upload

2024-11-09 来源:个人技术集锦

添加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地址,                    回显本地图片
            })
      }

Top