微信小程序uploader上传文件并提交表单数据完整案例(接口框架WebAPI)

WEUI文件上传详解 本文通过我个人设计的系统为案例来教会读者使用weui的uploader,先来看看效果图:                                                                                          图片上传框                                                      ... 阅读详情

写在前面的话

最近又自己在折腾微信小程序了。最新的一个功能中需要实现图片上传。幸运的是,微信小程序扩展能力中有现成的文件上传组件uploader可以使用,而不幸的是,这个组件坑实在太多了,而我又不是单纯的文件上传,还需要同步上传表单数据,因此各种坑,要么就是数据传不过去,要么就是后台取不到数据,折腾了我一天,各种尝试,终于搞定了。前后端完整用法记录一下,希望大家都能快速上手~

uploader介绍

uploader是微信小程序WeUI组件库中的一个图片上传的组件。大家可以在小程序开发文档中——扩展能力中找到相关用法。
在这里插入图片描述

这是一个集合了图片选择、上传、预览、删除的完整组件,属性定义也比较全面,可以自定义上传个数,有上传loading提醒和失败提醒,点击预览功能等,基本可以涵盖图片文件上传的所有功能要求。

用法也很简单,在json文件中加入引用后,在wxml文件中直接引入该组件就行,不需要跟自定义的那种文件上传一样,定义一堆标签和样式,方便多了。

官方文档有简单的使用案例:
1.在json中引入uploader组件
在这里插入图片描述2.在wxml中调用该组件,设置属性方法等

 <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{
    
    {selectFile}}" upload="{
    
    {uplaodFile}}" files="{
    
    {files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>

3.定义js中的上传方法

Page({
   
   
    data: {
   
   
        files: [{
   
   
            url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
        }, {
   
   
            loading: true
        }, {
   
   
            error: true
        }]
    },
    onLoad() {
   
   
        this.setData({
   
   
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },

    selectFile(files) {
   
   
        console.log('files', files)
        // 返回false可以阻止某次文件上传
    },
    uplaodFile(files) {
   
   
        console.log('upload files', files)
        // 文件上传的函数,返回一个promise
        return new Promise((resolve, reject) => {
   
   
            setTimeout(() => {
   
   
                reject('some error')
            }, 1000)
        })
    },
    uploadError(e) {
   
   
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
   
   
        console.log('upload success', e.detail)
    }
});

这部分代码里面其实只需要补充uplaodFile上传方法调用后台上传图片的接口,上传功能就算完整了,这算是一个可用的完整Demo。但是实际使用起来,还是需要完善一下滴。废话不多说,直接上代码~

用法与代码

小程序前端

1.如前文所说,在json中引入组件,在页面调用

 <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{
    
    {selectFile}}" upload="{
    
    {uplaodFile}}" files="{
    
    {files}}" max-count="1" title=""></mp-uploader>

因为我只需要上传一张图片,因此设置max-count等于1。
在这里插入图片描述

2.在uplaodFile中,需要调用resolve({urls})方法设置上传成功状态,否则图片会如下图所示一直显示在加载中,体验很不友好,因此先“假装”已经上传成功,等之后提交表单时再真正上传到后台。

【uniapp】图片、视频文件上传(支持小程序和H5) 此接口产生是因为ui.request不支持formdata格式,但是上传成功后请求成功返回却是500。发现uni.request 不支持formData类型的数据。第一步:查看接口文档,发现传递数据类型是表单。第二步:借助第三方,封装axios。方案一:(使用免费平台保存文件)方案二:(上传到后台接口)第三步:构建视图触发事件。 阅读详情

相关推荐

华中科技大学计算机组成原理-单总线CPU设计(全部通关)

【计算机组成原理】 单总线CPU实验 华中科技大学-计算机组成原理 实验三 单总线CPU设计 第1关 MIPS指令译码器设计 第2关 单总线CPU微程序入口查找逻辑 第3关 单总线CPU微程序条件判别测试逻辑 第4关 单总线CPU微程序控制器设计 第5关 采用微程序的单总线CPU设计 第6关 现代时序硬布线控制器状态机设计 第7关 现代时序硬布线控制器设计

紫荆鱼的博客 4万+

别再问ARM麒麟怎么装微信了!手把手教你用铠大师搞定Windows软件(飞腾/海思芯片实测)

本文详细介绍了如何在ARM架构的信创电脑(如飞腾/海思芯片)上使用铠大师安装和运行Windows软件,解决微信、Office等常用软件的兼容性问题。通过实测数据对比,铠大师在性能和易用性上显著优于传统方案,为麒麟系统用户提供了一套完整的解决方案。

weixin_28736355的博客 894

中兴B860AV2.1-A刷机避坑指南:晶晨免拆神器+安卓7.1.2固件实测

本文提供中兴B860AV2.1-A机顶盒的详细刷机教程,重点介绍使用晶晨免拆神器配合安卓7.1.2线刷固件包的实操步骤。内容涵盖刷机前的硬件确认、工具准备、软件设置、烧录全过程监控及常见问题解决,旨在帮助用户安全、高效地完成刷机,规避变砖风险,释放设备潜力。

pytorch8learner的博客 746

DNA图谱分析:自动分析DNA图谱中的变异YOLOv5、YOLOv8、YOLOv10

YOLO(You Only Look Once)是一种基于卷积神经网络(CNN)的目标检测模型,因其高效的检测速度和优异的精度而广泛应用于计算机视觉任务。一次性检测:与传统的目标检测方法不同,YOLO通过回归方法同时预测多个边界框和类别信息,从而实现高效的目标检测。高精度与高速度:YOLO在检测精度和速度之间找到了平衡,适用于实时目标检测任务。

YOLO 732

自动驾驶算法-滤波器系列(三)——不同运动模型(CV、CA、CTRV、CTRA)的建模和推导

CV & CA & CTRV & CTRA1. CV模型2. CA模型3. CTRV模型4. CTRA模型 1. CV模型 2. CA模型 3. CTRV模型 4. CTRA模型

weixin_41480034的博客 2万+

Windows系统下载安装 Git 的详细教程

本文详细介绍了Windows系统下载安装Git的完整流程,包括从Git官方网站和阿里镜像下载安装包,逐步讲解安装向导中的各个设置选项,如安装路径、默认编辑器、行尾转换、终端模拟器等,并提供了每个步骤的截图和说明。安装完成后,博客还介绍了如何验证安装是否成功,以及如何配置Git的用户名和邮箱,确保可以正常使用Git进行版本控制。

加斯顿工程师的博客 802

华为OD机考双机位C卷 - 评委评分 (Java & Python& JS & C/C++ & GO )

华为OD机考双机位C卷 - 评委评分 (OD上机考试双机位C卷)。提供在线OJ刷题。Java、C++、Python、GO语言、C语言、JavaScript题解,并提供完整思路讲解。

算法大师! 1750

备战2025数学建模国赛(算法46):多目标优化

本篇博客将深入浅出地介绍多目标优化的核心概念、主流算法,并重点结合一个数学建模竞赛的经典案例,提供完整的Python代码实现,助你在未来的竞赛中游刃有余。它通过寻找帕累托最优解集,完美地诠释了“鱼与熊掌不可兼得”的权衡思想,为最终决策提供科学依据。这些问题都包含多个相互冲突的目标,传统的单目标优化方法(如梯度下降、单纯形法)对此无能为力,因为它们无法同时优化多个目标。在数学建模竞赛中,我们面临的绝大多数问题都不是单一的“最好”,而是充满权衡与妥协的“最优”。记住,成功的建模不仅在于解出问题,更在于清晰地。

YOLO 285

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

上一篇: 利用Sql Server代理中的作业实现数据库的自动备份
下一篇: 文件上传漏洞攻击与防范方法
梦想小白菜
博客等级 码龄12年 27粉丝 30原创
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值