前端

🌳🌳🌳个人博客：Harvey的个人博客 🌲🌲🌲

    <div class="upload">
      <div>
        <icon name="caozuo-shangchuan-upload"></icon>
        <input
          name="file"
          @change="readImg($event)"
          style=" opacity: 0;  position:absolute;clip:rect(0 0 0 0);"
          type="file"
          id="file"
          value
          accept="image/*"
          capture="camera"
        >
        <label for="file" class="btn btn-success">原始单据上传</label>
      </div>
    </div>

@color2: #2ca6e0;
.upload {
  margin: 20px;
  font-size: 18px;
  color: @color2;
  display: flex;
  justify-content: space-between;

  .up-img {
    color: #333;
  }
}

JS

    readImg(event) {
      console.log("上传文件", event);
      let that = this;
      let file = event.target.files[0];

      that.uploadImgName = file.name;

      let param = new FormData(); // 创建form对象
       param.append("file", file, file.name); // 通过append向form对象添加数据
      param.append("order_no", that.order.order_no); // 添加form表单中其他数据
      console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去

      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };

      //  添加请求头
      axios.post('upload/upImg', param, config)
         .then(response => {
           if (response.data.status == 200) {
               // 成功上传后处理逻辑
         }
      })
    },

 后端PHP处理

$file = request()->file('file');
$param = request()->param();
if($file){
    $file_name = $param['order_no'].'_'.time();
    $info = $file->move(ROOT_PATH . 'order_img',$file_name);

    if($info){
       echo  $info->getSaveName()； // 图片名称
    }else{
        // 上传失败获取错误信息
        echo $file->getError();
    }
}