在vuejs上上传文件时获取“未定义的偏移量：1” - php

编程问答 2022-05-14

问题描述

在编辑页面上更新现有图像文件时出错。在创建页面上，它工作正常。如何在不点击 onchange 功能的情况下获取上传文件信息？

on create page on edit page

在 PHP 文件中

if($request->get('img')) //image upload
        {
            $image = $request->get('img');
            $name = time().'.' . explode('/',explode(':',substr($image,strpos($image,';')))[1])[1];
            \Image::make($request->get('img'))->save(public_path('img/').$name);
        }else{
            $name='';
        }

vueJs

<input class="img-value"
       ref="reset_bg_img"
       @change="img_upload($event)"
       value=""
       accept="image/*"                  
       id="BG-img" >

export default {
  name: "dummy",data() {
    return {
        bg_img:'' 
     }
   }
}

created() {
            axios.get("/view_schedule_quiz/" + this.$route.params.id)
            .then(response => {
                this.bg_img = '/quiz_img/'+response.data.bg_image;
            }.catch(error => console.log(error));
},schedule_img_upload(e){
      let files = e.target.files || e.dataTransfer.files;

      const file = e.target.files[0];
      this.bg_img = URL.createObjectURL(file);

      if (!files.length)
        return;
      this.createImage(files[0]);
    },createImage(file) {
      let reader = new FileReader();
      let vm = this;
      reader.onload = (e) => {
        vm.bg_img = e.target.result;
      };
      reader.readAsDataURL(file);
    },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

file-uploadlaravellaravelvue.js