小程序上传文件 wx.uploadFile

2024-08-21 01:48
文章标签 程序 上传 wx uploadfile

本文主要是介绍小程序上传文件 wx.uploadFile,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 微信小程序实现文件图片上传功能

准备工作:

在微信公众平台配置uploadFile域名白名单,开发管理->开发设置->服务器域名->uploadFile合法域名

如下图

 

使用 wx.chooseImage + wx.uploadFile

view

<view class="cu-form-group">

        <view class="grid col-4 grid-square flex-sub">

            <view class="bg-img" wx:for="{{imgList}}" wx:key="imagelist" bindtap="ViewImage" data-url="{{imgList[index]}}">

                <image src='{{baseUrl+imgList[index]}}' mode='aspectFill'></image>

                <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">

                    <text class="cuIcon-close"></text>

                </view>

            </view>

            <view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">

                <text class="cuIcon-cameraadd"></text>

            </view>

        </view>

    </view>

 js处理部分

 ChooseImage() {

        let that = this;

        let token = wx.getStorageSync('token');

        let openId = wx.getStorageSync('openId');

        wx.chooseImage({

            count: 1, //默认9

            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有

            sourceType: ['album'], //从相册选择

            success: (res) => {

                let filePath = res.tempFilePaths[0];

                wx.uploadFile({

                    url: config.api_blink_url + `/app/app/upload`,

                    filePath: filePath,

                    name: 'file',

                    header: {

                        'appId': config.appId,

                        'token': token || '',

                        'openId': openId || '',

                        'uuid': config.uuid,

                        'accept': 'application/json',

                        "Content-Type": "multipart/form-data"//记得设置

                    },

                    // formData: {

                    //     'file': filePath

                    // },

                    // body: {

                    //     'file': filePath

                    // },

                    success: function(result) {

                        if (result.statusCode === 500 ) {

                            wx.showToast({

                                title: `图片上传失败`,

                                icon: 'error',

                                duration: 1500

                            })

                            return;

                        }

                        let resData = JSON.parse(result.data);

                        if (resData && resData.code === 0) {

                            let path = resData.data.img;

                            if (that.data.imgList.length != 0) {

                                that.setData({

                                    imgList: that.data.imgList.concat(path)

                                })

                            } else {

                                let list = [path]

                                that.setData({

                                    imgList: list

                                })

                            }

                        }

                    },

                    complete: function(result) {},

                    fail: function(result) {

                        wx.showToast({

                            title: `图片上传失败`,

                            icon: 'error',

                            duration: 1500

                        })

                    }

                });

                

            }

        });

    },

 实现效果如下:

 

 

这篇关于小程序上传文件 wx.uploadFile的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1091774

相关文章

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

GitLab文件的上传与下载方式

《GitLab文件的上传与下载方式》:本文主要介绍GitLab文件的上传与下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录GitLab 项目拉取到本地GitLab 项目上传方法方法 1:本地项目未初始化Git方法 2:本地项目已初始化GitGitLab 上

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失

SpringBoot后端实现小程序微信登录功能实现

《SpringBoot后端实现小程序微信登录功能实现》微信小程序登录是开发者通过微信提供的身份验证机制,获取用户唯一标识(openid)和会话密钥(session_key)的过程,这篇文章给大家介绍S... 目录SpringBoot实现微信小程序登录简介SpringBoot后端实现微信登录SpringBoo