Laravel 7 Vue Dropzone-无法显示存储中的图像文件名未上传到phpmyadmin

分类：编程问答

如何解决Laravel 7 Vue Dropzone-无法显示存储中的图像文件名未上传到phpmyadmin

我已通过Dropzone js将提供的图像成功加载到images文件夹内公共文件夹中的存储中。我不清楚如何将引用上传到phpmyadmin SQL数据库。如果将其硬编码到数据库中，则可以在页面上看到它。但是，使用我正在使用的表单，我正在调用更新任务表单中的组件。我不确定这是否无法正常工作，但是无论如何，我都会发布代码，以希望有人能将我的方向正确。预先谢谢你。

ImageController.php 

public function store(Request $request)
    {
        $imageName = time() . '.' . $request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'),$imageName);
        return response()->json(['success' => 'You have successfully uploaded the file(s).']);
}

web.php 

Route::post('store-multiple-image','ImageController@store');

app.js 

Vue.component(
    "multiple-image-component",require("./components/MultipleImageUploadComponent.vue").default
);

TaskController.php（仅出于简洁目的存储方法）

 public function store(Request $request)
    {

        // $this->validate($request,[
        //     'name' => 'required|string|max:191',//     'email' => 'required|string|email|max:191|unique:users',//     'password' => 'required|string|min:6'
        // ]);

        return Task::create([
            'task_name' => $request['task_name'],'task_priority' => $request['task_priority'],'task_assigned_to' => $request['task_assigned_to'],'task_assigned_by' => $request['task_assigned_by'],'task_description' => $request['task_description'],'task_to_be_completed_date' => $request['task_to_be_completed_date'],'task_status' => $request['task_status'],'task_notes' => $request['task_notes'],'task_finished' => $request['task_finished'],'image' => $request['image'],]);
    }

Tasks.vue（为了防止在某处引起冲突，我已经在此处包括了所有内容）

<template>
  <div class="custom-container">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card w-100">
          <div class="card-header text-white" style="background-color: #605ca8;">
            <h3 class="card-title">Tasks</h3>

            <div class="card-tools">
              <button class="btn btn-success" @click="newModal">
                <i class="fas fa-tasks"></i> Add New Task
              </button>
            </div>
          </div>
          <!-- /.card-header -->
        </div>
      </div>
    </div>
    <div v-for="task in tasks" :key="task.id">
      <div class="my-3 p-3 bg-white rounded box-shadow">
        <div class="row">
          <div class="col-md-4">
            <h5>Task</h5>
            <hr />
            <p>{{ task.task_name }}</p>
          </div>
          <div class="col-md-4">
            <h5>Priority</h5>
            <hr />
            <p>{{ task.task_priority }}</p>
          </div>
          <div class="col-md-4">
            <h5>Assigned To</h5>
            <hr />
            <p>{{ task.task_assigned_to }}</p>
          </div>
          <div class="col-md-4">
            <h5>Assigned By</h5>
            <hr />
            <p>{{ task.task_assigned_by }}</p>
          </div>
          <div class="col-md-4">
            <h5>Date Assigned</h5>
            <hr />
            <p>{{ task.created_at }}</p>
          </div>
          <div class="col-md-4">
            <h5>Due</h5>
            <hr />
            <p>{{ task.task_to_be_completed_date }}</p>
          </div>
          <div class="col-md-4">
            <h5>Task Description</h5>
            <hr />
            <p>{{ task.task_description }}</p>
          </div>
          <div class="col-md-4">
            <h5>Finished</h5>
            <hr />
            <p>{{ task.task_finished }}</p>
          </div>
          <div class="col-md-4">
            <h5>Status</h5>
            <hr />
            <p>{{ task.task_status }}</p>
          </div>
          <div class="col-md-4">
            <h5>Images</h5>
            <hr />
            <img style="max-width: 150px;" :src="'/images/' + task.image" alt />
            <br />
            <img style="max-width: 150px;" src="/img/molding.jpg" alt />
          </div>
          <div class="col-md-4">
            <h5>Notes</h5>
            <hr />
            <p>{{ task.task_notes }}</p>
          </div>
          <div class="col-md-4">
            <h5>Action</h5>
            <hr />
            <a href="#" class="badge badge-primary p-2 mb-3" @click="editModal(task)">
              <i class="fa fa-edit"></i> Edit
            </a>
            <a @click="deleteTask(task.id)" href="#" class="badge badge-danger p-2">
              <i class="fa fa-trash"></i> Delete
            </a>
          </div>
        </div>
      </div>
    </div>

    <form @submit.prevent="editmode ? updateTask() : createTask()">
      <!-- Modal -->
      <div
        class="modal fade"
        id="addNew"
        tabindex="-1"
        aria-labelledby="addNewLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" v-show="!editmode" id="addNewLabel">Add New Task</h5>
              <h5 class="modal-title" v-show="editmode" id="addNewLabel">Update Task Information</h5>

              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <div class="form-group">
                <input
                  id="task_name"
                  type="text"
                  v-model="form.task_name"
                  name="task_name"
                  class="form-control"
                  placeholder="Task Name"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_name'
                                        )
                                    }"
                />
                <has-error :form="form" field="task_name"></has-error>
              </div>
              <div class="form-group">
                <select
                  id="task_priority"
                  type="text"
                  v-model="form.task_priority"
                  name="task_priority"
                  class="form-control"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_priority'
                                        )
                                    }"
                >
                  <option value>Select a Priority Level</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select>
                <has-error :form="form" field="task_priority"></has-error>
              </div>
              <div class="form-group">
                <textarea
                  id="task_description"
                  type="text"
                  v-model="form.task_description"
                  name="task_description"
                  class="form-control"
                  placeholder="Task Description"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_description'
                                        )
                                    }"
                ></textarea>
                <has-error :form="form" field="task_description"></has-error>
              </div>

              <div class="form-group">
                <input
                  id="task_assigned_by"
                  type="text"
                  v-model="form.task_assigned_by"
                  name="task_assigned_by"
                  class="form-control"
                  placeholder="Assigned By"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_assigned_by'
                                        )
                                    }"
                />
                <has-error :form="form" field="task_assigned_by"></has-error>
              </div>
              <div class="form-group">
                <input
                  id="task_assigned_to"
                  type="text"
                  v-model="form.task_assigned_to"
                  name="task_assigned_to"
                  class="form-control"
                  placeholder="Assigned To"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_assigned_to'
                                        )
                                    }"
                  value="form.user.id"
                />
                <has-error :form="form" field="task_assigned_to"></has-error>
              </div>
              <div class="form-group">
                <label for="task_to_be_completed_date">Due:</label>
                <input
                  id="task_to_be_completed_date"
                  type="date"
                  v-model="form.task_to_be_completed_date"
                  name="task_to_be_completed_date"
                  class="form-control"
                  placeholder="Due: "
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_to_be_completed_date'
                                        )
                                    }"
                />
                <has-error :form="form" field="task_to_be_completed_date"></has-error>
              </div>
              <div class="form-group">
                <select
                  id="task_status"
                  type="text"
                  v-model="form.task_status"
                  name="task_status"
                  class="form-control"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_status'
                                        )
                                    }"
                >
                  <option value>Select Task Status</option>
                  <option value="Pending">Pending</option>
                  <option value="Finished">Finished</option>
                  <option value="Incomplete">Incomplete</option>
                </select>
                <has-error :form="form" field="task_status"></has-error>
              </div>

              <div class="form-group">
                <select
                  id="task_finished"
                  type="text"
                  v-model="form.task_finished"
                  name="task_finished"
                  class="form-control"
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_finished'
                                        )
                                    }"
                >
                  <option value>Select finished status</option>
                  <option value="Finished">Finished</option>
                  <option value="Unfinished">Unfinished</option>
                </select>
                <has-error :form="form" field="task_status"></has-error>
              </div>
              <div class="form-group">
                <label for="task_notes">Notes:</label>
                <textarea
                  id="task_notes"
                  type="text"
                  v-model="form.task_notes"
                  name="task_notes"
                  class="form-control"
                  placeholder="Notes: "
                  :class="{
                                        'is-invalid': form.errors.has(
                                            'task_notes'
                                        )
                                    }"
                ></textarea>
                <has-error :form="form" field="task_notes"></has-error>
              </div>
              <multiple-image-component></multiple-image-component>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
              <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
              <button v-show="!editmode" type="submit" class="btn btn-primary">Create New Task</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editmode: true,tasks: {},attachments: [],// formImage: new FormData(),form: new Form({
        id: "",task_name: "",task_description: "",task_assigned_by: "",task_assigned_to: "",task_to_be_completed_date: "",task_priority: "",task_notes: "",task_status: "",task_finished: "",task_image: "",}),};
  },methods: {
    updateTask() {
      this.$Progress.start();
      this.form
        .put("api/task/" + this.form.id)
        .then(() => {
          // successfull
          $("#addNew").modal("hide");
          Swal.fire("Updated","Task information updated.","success");
          this.$Progress.finish();
          Fire_event.$emit("AfterCreate");
        })
        .catch(() => {
          // Unsuccessfull
          this.$Progress.fail();
        });
    },editModal(task) {
      this.editmode = true;
      this.form.reset();
      $("#addNew").modal("show");
      this.form.fill(task);
    },newModal() {
      this.editmode = false;
      this.form.reset();
      $("#addNew").modal("show");
    },deleteTask(id) {
      Swal.fire({
        title: "Are you sure?",text: "You won't be able to revert this!",icon: "warning",showCancelButton: true,confirmButtonColor: "#3085d6",cancelButtonColor: "#d33",confirmButtonText: "Yes,delete it!",}).then((result) => {
        // Send request to the server
        if (result.value) {
          this.form
            .delete("api/task/" + id)
            .then(() => {
              Swal.fire("Deleted!","Task has been deleted.","success");

              Fire_event.$emit("AfterCreate");
            })
            .catch(() => {
              Swal.fire("Failed","Something went wrong.","warning");
            });
        }
      });
    },loadTasks() {
      axios.get("api/task").then(({ data }) => (this.tasks = data.data));
    },createTask() {
      this.$Progress.start();
      this.form
        .post("api/task")
        .then(() => {
          Fire_event.$emit("AfterCreate");
          $("#addNew").modal("hide");
          toast.fire({
            icon: "success",title: "Task Created successfully",});
          this.$Progress.finish();
          this.target.reset();
        })
        .catch(() => {
          this.$Progress.fail();
          //   toast.fire({
          //     icon: "error",//     title: "The Task was not created.",//   });
        });
    },},created() {
    this.loadTasks();
    // setInterval(() => this.loadUsers(),3000);
    Fire_event.$on("AfterCreate",() => {
      this.loadTasks();
    });
  },mounted() {
    console.log("Component mounted.");
  },};
</script>

Task.php（模型）

protected $fillable = [
        'task_name','task_priority','task_assigned_to','task_assigned_by','task_description','task_to_be_completed_date','task_status','task_notes','task_finished','image'
    ];

最后是Dropzone的MultipleImageUploadComponent.vue 

<template>
    <div class="container">
        <div class="row justify-content-start">
            <div class="">
                <div class="card">
                    <div class="card-header">Task Image</div>
                    <div class="card-body">
                        <vue-dropzone
                            ref="myVueDropzone"
                            id="dropzone"
                            :options="dropzoneOptions"
                        ></vue-dropzone>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";

export default {
    components: {
        vueDropzone: vue2Dropzone
    },data: function() {
        return {
            dropzoneOptions: {
                url: "/store-multiple-image",headers: {
                    "X-CSRF-TOKEN": document.head.querySelector(
                        "[name=csrf-token]"
                    ).content
                }
            }
        };
    },mounted() {
        console.log("Component mounted.");
    }
};
</script>

将vue和laravel结合在一起是我的新手，所以如果您能帮帮我，我一定会感激的。

解决方法

现在，Dropzone使用Ajax请求，而我试图用来上载表单其余部分的方法也是如此。这会产生冲突，开箱即用，Dropzone将不允许使用此功能。

至少现在没有配置日志。就我而言，Dropzone不是一个可行的选择，我必须寻找其他选择才能在表单中上传多个图像。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
VM VirtualBox中安装centos时报错：设置基础软件仓库时出错
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
kafka常见问题
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
hive常见问题
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
装载数据时报错：Failed to execute spark task, with exception 'org.apache.hadoop.hive.ql.metadata.HiveException(Failed to create spark client.)'
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
flume常见问题
报错1：执行到如下就不执行了，没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
hadoop集群常见错误
虚拟及没有启动任何服务器查看jps会显示jps，如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
hive常见错误
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
Linux常见错误
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
使用sqoop一直卡在：mapreduce.Job: Running job: job_1703173956074_0001
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot