关于uniapp多图片上传和单图片上传

记录小知识

uniapp的多图片上传方法和单图片上传方法本质是一样的,无非就是你循环或者祂帮你循环

单图片上传:传递一个需要上传的图片链接

多图片上传:传递一个需要上传的图片组成的数组

单图片方式实现多图上传就需要循环调用上传接口

async upload() {
    // 需要上传的图片数组
    let array = [{},{},{}]
    // 循环调用,这里不用foreach是因为foreach是单独一个函数作用域,使用await无法保持同步
    for(let i=0;i<array.length;i++){
        let res = await upload({url: array[i]})
    }
}

不管哪种方式,服务端都是一条一条的收到的图片,应该不存在什么效率问题,当然我自己觉得,uniapp官方没有提示出来

我写代码途中都是一般都是用for循环+async await来解决不同步问题,如果有更好的方法,欢迎大佬指教一下

主要用了Uploadify插件,还有AJAX。 兼容各种主流浏览器:chrome Firefox IE ... IE7以上都兼容,IE6没试过。 因为Uploadify是用flash做的,所以如果浏览器上面看不到"上传"按钮,请先检查你的flash是否已安装。 压缩包里包含两个项目,一个是多图上传的示例(不含数据库),另一个也是多图上传的示例,不过这个可以修改每张图片的描述,所以用了SQL数据库。 项目中UploadHandler.ashx里面有等比例生成缩略图和裁剪图片的方法,如有需要可直接调用。 第一个项目和第二个项目都主要用Jquery AJAX Uploadify来完成上传图片的功能。很简的代码,不会复杂。如果不认识这三个东西的,建议百度或谷歌一下。 第二个项目用了linq to sql进行对SQL数据库的操作,包括上传图片时对数据库进行插入数据的操作,删除图片时对数据库进行删除的操作,设置"封面图片"时对数据库的操作。 这个我是用ASP.NET建的项目,如果你是其他平台的也可以参考里面某些代码,如Uploadify上传,Jquery对图片列表的操作。 其他的具体看项目,代码片段: PicUpload.js : //删除图片 function deletePic(n) { $.ajax({ type: "GET", url: "/api/UploadHandler.ashx?action=deletePic", data: "picName=" + n + "&ver=" + new Date().getTime(), dataType: "html", success: function (data) { if (data.length > 10) { $("li[id='p_" + n.replace(".jpg", "") + "']").remove(); } } }) } UploadHandler.ashx : //删除图片 public bool DeletePic(string pName) { string uploadPath = HttpContext.Current.Server.MapPath("~/Upload/" + pName); if (System.IO.File.Exists(uploadPath)) { System.IO.File.Delete(uploadPath); Album query = (from item in db.Album where item.Pname == pName select item).First(); db.Album.DeleteOnSubmit(query); db.SubmitChanges(); return true; } else return false; } 最后简说下Uploadify,Uploadify的介绍网上都很多,也有很多的示例。我就说说功能,看下面的代码: $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '/js/jquery.uploadify-v2.1.0/uploadify.swf', 'script': '/api/UploadHandler.ashx', 'cancelImg': '/js/jquery.uploadify-v2.1.0/cancel.png', 'folder': '/Upload', 'queueID': 'fileQueue', 'auto': true, 'multi': true, 'fileDesc': '请选择.jpg .png .bmp .jpeg文件', 'fileExt': '*.jpg;*.png;*.bmp;*.jpeg;', 'onComplete': function (e, queueId, fileObj, data) { $("#photoListUl").append(data); $("#progressText2").hide(); document.getElementById('photoListUl').scrollTop = "99999"; }, 'onSelect': function (e, queueId, fileObj) { $("#progressText1").text(iSum++); $("#progressText2").show(); } }); }); function uploadFile() { jQuery('#uploadify').uploadifyUpload() } 可以限定选择上传的文件类型,我这里是上传图片. 可以限定要上传的文件的大小,如限定为15M? 可以在上传的时候添加参数或各种验证. 这些你在网上可以找到很多例子的,我在项目里就不添加上去了。 ----------------------------------------------------------------- 项目仅供参考。如有疑问可直接回复或企鹅: 514158268
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值