博客

代码片段：

dom:

<Upload
 ref="upload"
  class="compare-upload"
  :show-upload-list="false"
  :before-upload="handleUpload"
  :format="['png','jpg','jpeg','bmp']"
  :accept="'image/*'"
  multiple
  type="drag"
  :action=actionUpload>
  <div style="padding: 18px 0">
    <i class="h_upload"></i>
    <p class="compare-upload-p">点击上传，拖拽图片到此，也可上传</p>
    <p class="p-tip3">仅支持标准格式上传，最多上传10张</p>
  </div>
</Upload>
<div class="mt16 uploadListBox _clear">
  <div v-show="showFlag=='img'" v-for="(item, index) in uploadList" class="imguploadList" :key="index">
    <div class="imguploadList-img">
      <img  :src="item.imageStr">
    </div>
    <div class="imguploadList-cont"><label>序号：</label><div><Input placeholder="请输入" v-model="item.seqNo"></Input></div></div>
    <div class="imguploadList-cont" @click="openfingerModal(index)"><label>指位：</label><div><Input placeholder="请选择" v-model="item.fgpCN" readonly><Icon class="h_menu" slot="suffix" /></Input></div></div>
    <div class="imguploadList-cont"><label></label><button class="btn-delete" @click="delItem(index)"><i class="h_delete"></i>移除</button></div>
  </div>
</div>

方法：

//上传文件之前的钩子方法，用来处理文件数据

handleUpload(file) {
  let _this = this;
  if(_this.headList[_this.headFlag].imgList && _this.headList[_this.headFlag].imgList.length>9){
    this.$Message.error( '最多可以上传10个文件！');
  }else {
    if (file.size > 2097152) {//限制文件的大小
      this.$Message.error(file.name + '大小超过2M！');
    } else {
      let size = file.size;
      size = size > 1023.9
        ? size / 1024 > 1023.9
          ? size / (1024 * 1024) > 1023.9
            ? (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
            : (size / (1024 * 1024)).toFixed(2) + 'MB'
          : (size / 1024).toFixed(2) + 'KB'
        : size.toFixed(2) + 'B';
      //读取文件的字符流
      const reader = new FileReader();
      //将文件读取为 DataURL 以data:开头的字符串
      reader.readAsDataURL(file);
      reader.onload = e => {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        const code = e.target.result;
        let imgObj = {
          bty: _this.headList[_this.headFlag].val,
          seqNo: _this.uploadList.length + 1,
          fgps: [],
          fgpCN: '',
          size: size,
          name: file.name,
          imageStr: code
        };
        _this.uploadList.push(imgObj);
        _this.headList[_this.headFlag].imgList.push(imgObj);
      }
    }
  }
  return false;
},

//点击按钮调用上传附件接口，图片以base64数据格式上传，反显数据前缀加’data:image/*;base64,’

uploadFile() {
  let _this = this;
  let uploadList = []
  for(let it of this.headList){
    uploadList = uploadList.concat(it.imgList)
  }
  if(uploadList.length==0){
    this.$Message.error('请上传附件');
  }else{
  	let params = {
  	printType: _this.printType
      }
      params = Object.assign(params, formCustom);
      uploadList = JSON.parse(JSON.stringify(uploadList));
      for (let it of uploadList) {
        delete it.fgpCN;
        delete it.size;
        delete it.name;
        it.fgps = it.fgps;
        it.imageStr = it.imageStr.replace(/^data:image\/\w+;base64,/, '');
      }
      params.images = uploadList;
      if (params.occurDate) {
        params.occurDate = common.formatDate(params.occurDate, "yyyyMMddhhmmss")
      }
      registeAPI.imageUploadFile(params).then(res => {
        if (res.status == 'ok') {
          _this.$Message.success("保存成功！");
          _this.clearData(formCustomName);
        } else {
          _this.$Message.error(res.msg);
        }
      })
  }
},

//点击按钮调用上传附件接口，文件以format格式上传

uploadFile() {
  let params = new FormData();
 // 将readyFile中的文件添加到FormData中
  this.readyFiles.forEach(function (file) {
    params.append("file", file)
  });
  // params.append("file", this.readyFiles);
  params.append("btys", this.uploadData.btys.toString());
  params.append("printType", this.uploadData.printType);
  // params.append('Authorization', sessionStorage.JWT_TOKEN); // token验证上传权限
  let config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  };
  axios.post('/abisweb/aibbs/import/fptx/', params, config)
    .then(res => {
      _this.spinShow = false;
      if (res.data.status === 'ok') {
        _this.$Message.success("保存成功！");
        _this.clearData()
      } else {
        _this.$Message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.log(err);
    });
},