android 客户端开发 如何同时上传多张照片
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android 客户端开发 如何同时上传多张照片相关的知识,希望对你有一定的参考价值。
1、在微博页面点击左上角发布按钮后,点击“照相机”标识或“图片”标识;2、选择图片进行上传,选定后点击右下角的绿色“确认”按钮
3、多图上传最多支持9张图片,如果还需添加可点击“十”字继续选择上传,如果添加完毕可点击右上角的蓝色“发布”即可。 参考技术A 使用AsyncTask任务来上传。
自定义一个AsyncTask,你可以设置一个异步的最大数。选择好上传的图片集合后,上传,每张图片走一个Task,这样就完成了。 参考技术B 多开几个线程不就得了追问
关键是服务器端怎么判断接收不同照片
本回答被提问者采纳 参考技术C 【我思念的城市已是黄昏,为何我总对你一往情深。曾经给我快乐,也给我创伤。曾经给我希望,也给我绝望。】 参考技术D 用助手版吧如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序?
【中文标题】如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序?【英文标题】:How can I upload multiple photos to a Laravel application through ajax using vanilla javascript? 【发布时间】:2019-03-12 04:32:25 【问题描述】:我有这个表格,我需要能够通过 ajax 将数据发布到服务器,用户可以上传 1 张或多张照片,或者他们可能根本不上传任何照片,无论如何我如何发送从`type=file 输入并在后台上传到服务器?
这是表单的相关部分:
<form action="" method="POST" enctype="multipart/form-data">
@csrf
<label for="photos">Photos:</label>
<input type="file" name="photos[]" id="photos" class="form-control" multiple>
<button class="btn btn-success mt-3" onclick="ajaxify(event)">Submit</button>
</div>
</form>
这是 javascript 的相关部分:
function ajaxify(event)
event.preventDefault();
let failedValidation = false;
// I removed parts of the code where I load other dataand do validation, irrelevant to the question.
let photos = [];
if(document.getElementById('photos').value !== '')
photos = document.getElementById('photos'); // I know this is incorrect, but I don't know what to do here.
// Here photos.value return something like c://fake/filename
// And it doesn't return more than 1 file even, so anyway I am definitely doing this wrong.
if(! failedValidation)
axios.post('/listing/create',
client_name: name.value,
client_phone_number: client_phone_number.value,
category: category.value,
type: type.value,
governorate: governorate.value,
city: city.value,
space: space.value,
price: price.value,
furnished_status: furnished_status.value,
payment_type: payment_type.value,
initial_deposit: initial_deposit.value,
monthly_amount: monthly_amount.value,
notes: notes.value,
photos: photos.value, // So this should be an array of uploaded files.
)
.then((resp) =>
invalid.classList.add('d-none');
console.log(resp);
)
我想要什么? 是让我上传的文件在应用程序的服务器端可用于 Laravel,当我做一个正常的帖子并做 dd($request->photos);
我得到一个上传文件的数组,我不确定 ajax/json 是否可行,但这就是我想要处理照片的原因。
快速说明,如果这有什么不同的话,我正在使用 Laravel 媒体库包。
到目前为止我所做的正在研究此事,我读到我需要使用 FormData(),我以前从未使用过,我有几个的问题,我是否需要将我的所有数据放入 FormData()
对象中并将其提供给 axios?还是我只需要它来拍摄照片?我还没有尝试做这两件事,任何指导将不胜感激。
【问题讨论】:
你所有的数据都需要在一个formData对象中 在我这样做之后,我只需发送保存 FormData() 的变量和 axios 之类的数据:formdata? 是的,没错 @Paras 不幸的是,我已经这样做了,最终我将一个空对象发送到服务器。 【参考方案1】:您只会得到一个文件,因为所有文件对象都存储在files
属性中的数组中。只需将它们附加到您的 photos
数组即可。
function ajaxify(event)
event.preventDefault();
// use files attribute to get an array of the files
var photoFiles = document.getElementById("photos").files;
// using the array of files, create an array 'photos' of FormData objects
let photos = [];
for (let photo of photoFiles)
photos.push(new FormData(photo);
// turn your 'photos' array into a javascript object
let photos = arr2obj(photoFiles);
// this should fix the empty array problem you were having
// pass 'photos' to the ajax data
// ....
编辑: 根据this post 的说法,正如其中一位评论者指出的那样,使用 AJAX 上传文件需要 FormData
对象。您的数组必须是 FormData
对象的数组。
编辑:通过 JSON 发送数组很麻烦。把你的数组变成一个对象。您可以使用像这样的简单函数从数组中构建一个对象。
function arr2obj(arr)
var obj = ;
for (let i=0; i<arr.length; i++)
obj['photo'+i] = arr[i];
return obj;
【讨论】:
在我完成了你推荐的操作之后,如果你能帮我解决这个问题,我会遗漏一些东西,当我 console.log(photos) 得到我按预期上传的文件时,但是当我在服务器上 dd($request->photos) 时,我得到一个空数组数组,假设我上传了 2 张图像,我得到这个:array:2 [ 0 => [] 1 => [] ] 我像这样将photos变量分配给axios,而不是photos:photos.value,我有photos:photos,我认为错误可能在这里,你知道吗? 不幸的是,我无法让它工作,我一直在尝试不同的东西,但它不起作用,无论如何 formData 总是空的,你甚至无法通过控制台检查它。 log(),当它被发送到服务器时它只是一个空数组,我最终这样定义它,var formData = new FormData(); formData.append('照片', photoFiles);在 axio.post 的所有其他内容下,我有这张照片:formData,但是当我 dd($request);. @OmarTarek 看看this post。似乎问题是在 json 中发送数组可能很麻烦。检查第二次编辑。 我照原样复制并粘贴了第二个答案中的代码,只是为了查看该数组是否会发送到服务器,不,我再次得到一个空数组。 我终于找到了缺失的部分,在根据另一篇文章实施了你的最后一个建议之后,缺失的部分是为什么服务器得到一个空数组,原来是这个 axios.post(' /listing/create', data; formData, ),这是导致问题的原因,经过一番研究后,我将其更改为 axios.post('/listing/create', formData),瞧,它终于起作用了,我迁移了其余的表单元素,以便将所有内容附加到 formData 对象,无论如何,非常感谢您提供了很大的帮助。以上是关于android 客户端开发 如何同时上传多张照片的主要内容,如果未能解决你的问题,请参考以下文章
如何使用具有离子和角度的照片相机在firebase中同时保存多个图像
如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序?