图片上传后提交数据

Question

我的网站具有允许用户创建帖子的功能（如 Facebook）。我有一个带有“消息”输入字段和一个允许用户上传图片的按钮的表单。

现在，我的代码设置是当用户提交表单时，我的代码会先提交数据，然后上传图片。

这样做的问题是，如果用户中途取消图片上传，数据库记录会存在（因为数据是在图片上传之前提交的），但不会上传任何图片。

所以我的解决方案是先上传图片，然后提交数据。问题在于我不确定如何将图像与数据库记录中的数据联系起来。

我是否应该将所有图像上传到/tmp，然后将文件移动到永久目录，例如/var/www/html/website/public/img/uploads/<upload_id>，其中upload_id 是数据库记录的id？

如果用户上传了图片，但中途关闭了标签，我该怎么办。然后/tmp 中会有一个图像，除非目录被清理，否则它将永远保留在那里。我该如何清理它？

这是最好的方法还是有更好的方法？

我正在使用 Laravel 5.3 和 Dropzone.js。

谢谢。

Answer 1

由于您使用的是允许通过 ajax 上传文件的 Dropzone.js，您可以通过以下方式执行此操作：

1) 使用 Dropzone.js (ajax) 将文件发送到后端服务器。

2）由于您使用的是laravel，因此您收到的每个文件都是UploadedFile的实例，您可以使用该类访问上传文件的原始名称，大小，MimeType等。

3) 在数据库中的图像模型中（如果尚未创建，则创建此图像），为该图像创建一个新记录，并在需要时存储上述字段，以及存储图像的路径。您可以使用存储在表格行中的此路径稍后访问图像。

4) 获取图像表中新插入行的“id”并将其传递回前端，您可以使用 Dropzone 插件的“success”事件处理程序接收它。

5) 将这个新插入的“id”作为隐藏的输入元素附加到表单中。

6) 当您提交表单时，您将收到与您的帖子相关的图像 ID，您可以使用您选择的数据库关系来保存它。

7) 是的，您需要额外检查已上传并输入到您的图像表中的图像，但那些尚未创建帖子的图像。您可以为其创建 Artisan CLI 命令并将其分配为 Cron Job。

Answer 2

我认为您应该使用 AJAX 提交表单。这个解决方案对我很有用。

1. 使用事件“onclick”而不是按钮创建一个、跨度或其他元素，因为即使按钮​​的类型不是“提交”，按下按钮也会自动确认表单。

   李>

2. 这样写一个ajax函数：

   function newsFormSubmit(item_id){
   
         var formData = new FormData($('.news-form')[0]);
   
         formData.append("item_id", item_id);
   
         $.ajax({
            type: 'POST',
            url: config.routes[0].savenews,
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
               if (data.error)
               {
                    alert(data.error);
                    return false;
               } else if (data)
               {
                    $('#news-card-' + item_id).html(data);
               }
           }
       });
   }
   

3. 将此函数放在 onclick 事件上。