使用 FineUploader 上传多个带索引的文件
Posted
技术标签:
【中文标题】使用 FineUploader 上传多个带索引的文件【英文标题】:Use FineUploader to upload multiple files with index 【发布时间】:2017-03-09 23:32:23 【问题描述】:我正在为我的图片上传功能使用FineUploader 插件,当启用multiple
选项时,我无法找到跟踪文件索引的方法。
我在服务器端处理图像上传时所做的是,我会从数据库中查询现有图像,获取计数,并将索引等于existing_count+1
的新上传图像的链接保存到数据库.
这应该可以让我记录所有上传的图像,并将它们的上传顺序作为索引。
但是,启用multiple
选项后,当上传者访问我的服务器端点以获取后续文件时,数据库查询似乎不会从上次保存的图像更新。
这是竞争条件吗?有没有办法将文件索引传递给服务器?
这是我的代码:
服务器端(Laravel)
public function save_listing_picture()
if (Input::hasFile('listing'))
$user = Auth::user();
$id = $user->id;
$existing_count = Image::where('user_id', $id)->count(); //this doesn't update on a multiple upload request
$file = Input::file('listing');
$imagePath = '/images/'+$id+'/image_'+$existing_count+1+'.jpg';
$img = Image::make($file)->encode('jpg', 75);
$img->save($imagePath);
$imgRecord = new Image();
$imgRecord->link = $imagePath;
$imgRecord->save();
前端(JS):
var listingUploader = new qq.FineUploader(
element: document.getElementById("image-uploader"),
template: 'qq-template',
debug: true,
request:
endpoint: '/account/save-image',
params: '_token': csrf_token,
inputName: 'listing'
,
thumbnails:
placeholders:
waitingPath: '/img/fine-uploader/waiting-generic.png',
notAvailablePath: '/img/fine-uploader/not_available-generic.png'
,
image:
minHeight: 300,
minWidth: 300
,
validation:
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
itemLimit: 3
);
【问题讨论】:
不使用索引,它在上传集和用户之间不是唯一的,为什么不使用Fine Uploader上传请求发送的UUID引用文件? @RayNicholus 谢谢。我使用序列认为在前端检索图像 URL 更容易。我想在这一点上,UUID 是一种更好的方法。 每个上传请求都包含一个带有此 UUID 的qquuid
参数。您需要进一步的帮助吗?
@RayNicholus 有没有办法在完整的回调中检索qquuid
?只是在上传完成后尝试在前端刷新图像。
给定文件的 ID,它提供给您的 onComplete
回调处理程序,您可以使用 getUuid(id)
检索 UUID。
【参考方案1】:
我最终使用UUID
跟踪上传的每个文件,以避免重复和错误覆盖(感谢@RayNicholus 的建议)。
这是我的解决方案:
服务器端
public function save_listing_picture(Request $request)
if (Input::hasFile('listing'))
$user = Auth::user();
$id = $user->id;
$file = Input::file('listing');
$fileId = $request->get('qquuid');
$destination_path = 'images/' . $id . '/';
if (!is_dir($destination_path))
mkdir($destination_path, 0777, true);
$full_path = $destination_path . $fileId . ".jpg";
$img = Image::make($file)->encode('jpg', 75);
$img->save(public_path() . '/' . $full_path);
$imgRecord = new Image();
$imgRecord->link = $full_path;
$imgRecord->save();
return response()->json(['success' => true]);
return response()->json(['status' => 'Input not found']);
前端:
var userId = Auth::user()->id; //laravel blade
var listingUploader = new qq.FineUploader(
element: document.getElementById("image-uploader"),
template: 'qq-template',
debug: true,
request:
endpoint: '/account/save-image',
params: '_token': csrf_token,
inputName: 'listing'
,
thumbnails:
placeholders:
waitingPath: '/img/fine-uploader/waiting-generic.png',
notAvailablePath: '/img/fine-uploader/not_available-generic.png'
,
image:
minHeight: 300,
minWidth: 300
,
validation:
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
itemLimit: 3
,
callbacks:
onAllComplete: function(succeeded, failed)
if (succeeded.length > 0)
succeeded.forEach(function(fileId, index)
var imageId = "image" + index;
document.getElementById(imageId).src='images/' + userId + '/' + listingUploader.getUuid(fileId)+".jpg";
);
);
【讨论】:
以上是关于使用 FineUploader 上传多个带索引的文件的主要内容,如果未能解决你的问题,请参考以下文章