图像CRUD在laravel 9中与vue Js

ql3eal8s  于 2023-02-05  发布在  Vue.js
关注(0)|答案(1)|浏览(130)

我有一个表单,我希望它有一个CRUD函数,我已经为文本创建了函数,但我不知道如何对图像执行CRUD,
下面是我的代码:
型号

protected $fillable= [
        'nama',
        'alamat',
        'nomor',
        'email',
    ];

控制器:

public function index()
    {
        return Form::all();
    }

    public function store(Request $request)
    {

        $data = $request->all();
        $response = Form::create($data);
        return response()->json([
            'status' => 'success',
            'data' => $response
        ], 200);
    }

表格:

<Form @submit="saveData()">
    <div class="form-row form-section" id="formParent">
        <div class="col-12 mb-3">
            <Field name="nama" type="text" class="form-control1" v-model="form.nama" placeholder="         Nama Lengkap" :rules="isRequired" />
            <br>
            <ErrorMessage name="nama" />
            <br>
            <Field name="alamat" type="text" class="form-control2" v-model="form.alamat" placeholder="         Alamat" :rules="isRequired" />
            <br>
            <ErrorMessage name="alamat" />
            <br>
            <Field name="nomor" type="text" class="form-control3" v-model="form.nomor" placeholder="         Nomor Telfon" :rules="isRequired" />

            <br>
            <ErrorMessage name="nomor" />
            <br>
            <Field name="nomor" type="file" class="form-control3" v-model="form.nomor" placeholder="         Nomor Telfon" :rules="isRequired" />

            <Field name="email" type="text" class="form-control4" v-model="form.email" placeholder="         Email" :rules="validateEmail" />
            <br>
            <ErrorMessage name="email" />
        </div>
        <button class="btnSubmit" type="submit">
            Gabung Mitra
        </button>
    </div>
</Form>

脚本:

<script>
import axios from 'axios';
import { Form, Field, ErrorMessage} from 'vee-validate';

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },
  data() {
    return {
      form: {
        nama: '',
        alamat: '',
        nomor: '',
        email: '',
      },
    };
  },
  
  methods: {
      isRequired(value){
          if (value && value.trim()){
              return true;
          }
          return 'This is required';
      },
      validateEmail(value) {
        // if the field is empty
        if (!value) {
          return 'This field is required';
        }
        // if the field is not a valid email
        const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
        if (!regex.test(value)) {
          return 'This field must be a valid email';
        }
        // All is good
        return true;
      },
      saveData(){
          axios.post('/form/submit', this.form).then(
              response => {
                  console.log(response);
                  this.$toast.success(`Data berhasil dikirim`,{
                    position: "bottom",
                  });
              }
          ). catch(error => {
              console.log('error');
              this.$toast.error(`Terjadi kegagalan`,{
                    position: "bottom",
                  });
          })
      }
  }
};
</script>

我该怎么做才能让用户将图像上载到表单并保存到数据库。我尝试将字段类型改为文件,但我不知道该功能在控制器中是如何工作的。

ekqde3dh

ekqde3dh1#

为了用表单存储图像,你需要在contoller中添加一些行来处理和存储图像,同时你还需要在表单提交中添加enctype。
首先,您需要更改:

<Form @submit="saveData()" enctype="multipart/form-data">

现在您需要更改图像输入字段:

<Field name="image" type="file" class="form-control3" v-model="form.image" :rules="isRequired" />

在控制器内部,您需要更改请求代码:

public function store(Request $request)
{
    $data = $request->all();
    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $path = $image->store('public/images');
        $data['image'] = $path;
    }
    $response = Form::create($data);
    return response()->json([
        'status' => 'success',
        'data' => $response
    ], 200);
}

最后,在您的模型中:

protected $fillable = [
    'nama',
    'alamat',
    'nomor',
    'email',
    'image',
];

相关问题