WeChat Applet
Mini Program Development
Analysis of practical cases of uploading pictures in WeChat applet
Analysis of practical cases of uploading pictures in WeChat applet
This time I will bring you an analysis of a practical case of uploading images to WeChat mini programs. What are the precautions for practical cases of uploading images to WeChat mini programs? The following is a practical case, let’s take a look.
I have seen a lot of examples on the Internet of small programs uploading images and java back-end reception, but no matter which website I read, the code is basically the same, and there is a lot of code.
So I just wrote a simpler one myself.
One small terminal
user.wxml
<view class='user_head'>
<view>
<image src='{{ptuser.avatarUrl}}' bindtap='updateHead'></image>
</view>
<text>点击选择头像</text>
</view>user.js
// 更换头像
span style="font-size:18px;color:#FF0000;"> updateHead: function () {
var that = this
// 上传图片 获取路径
wx.chooseImage({
success: function (res) {
console.log('临时路径：' + res.tempFilePaths[0])
wx.uploadFile({
url: app.globalData.baseUrl + '/file/uploadFile',
filePath: res.tempFilePaths[0],
name: 'file',
success: function (result) {
console.log("返回路径：" + result.data)
}
})
},
})
},Two java terminal
package cn.helloxhs.moudle.common;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import cn.helloxhs.base.controller.BaseController;
/**
* 类说明
*
* @author 肖荷山
* @version 创建时间：2017年12月23日 上午11:14:27
*/
@Controller
@RequestMapping("/file")
public class FileController extends BaseController {
@RequestMapping("/uploadFile")
@ResponseBody
public Object uploadFile(HttpServletResponse response, HttpServletRequest request, MultipartFile file) {
String realPath = request.getSession().getServletContext().getRealPath("/temp");
try {
CommonsMultipartFile cf = (CommonsMultipartFile) file;
DiskFileItem fi = (DiskFileItem) cf.getFileItem();
File f1 = fi.getStoreLocation();
InputStream ips = new FileInputStream(f1);
OutputStream ops = new FileOutputStream(realPath + "/" + "xhs.jpg");
byte[] b = new byte[1024];
int len;
try {
while ((len = ips.read(b)) != -1) {
ops.write(b, 0, len);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
// 完毕，关闭所有链接
try {
ops.close();
ips.close();
} catch (IOException e) {
e.printStackTrace();
}
}
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return realPath;
}
}The picture is stored in the temp directory of the project
It’s simple, it has no other functions, just upload pictures.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use WeChat applet to upload pictures
How to operate JS to generate random numbers and Random sequence
The above is the detailed content of Analysis of practical cases of uploading pictures in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1670
14
1428
52
1329
25
1273
29
1256
24
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
PHP Practical: Code Example to Quickly Implement Fibonacci Sequence
Mar 20, 2024 pm 02:24 PM
PHP Practice: Code Example to Quickly Implement the Fibonacci Sequence The Fibonacci Sequence is a very interesting and common sequence in mathematics. It is defined as follows: the first and second numbers are 0 and 1, and from the third Starting with numbers, each number is the sum of the previous two numbers. The first few numbers in the Fibonacci sequence are 0,1,1.2,3,5,8,13,21,...and so on. In PHP, we can generate the Fibonacci sequence through recursion and iteration. Below we will show these two
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Java development practice: Integrating Qiniu cloud storage service to achieve file upload
Jul 06, 2023 pm 06:22 PM
Java Development Practice: Integrating Qiniu Cloud Storage Service to Implement File Upload Introduction With the development of cloud computing and cloud storage, more and more applications need to upload files to the cloud for storage and management. The advantages of cloud storage services are high reliability, scalability and flexibility. This article will introduce how to use Java language development, integrate Qiniu cloud storage service, and implement file upload function. About Qiniu Cloud Qiniu Cloud is a leading cloud storage service provider in China, providing comprehensive cloud storage and content distribution services. Users can use Qiniu Yunti
In-depth study of Elasticsearch query syntax and practical combat
Oct 03, 2023 am 08:42 AM
In-depth study of Elasticsearch query syntax and practical introduction: Elasticsearch is an open source search engine based on Lucene. It is mainly used for distributed search and analysis. It is widely used in full-text search of large-scale data, log analysis, recommendation systems and other scenarios. When using Elasticsearch for data query, flexible use of query syntax is the key to improving query efficiency. This article will delve into the Elasticsearch query syntax and give it based on actual cases.
Geographical positioning and map display using PHP and mini-programs
Jul 04, 2023 pm 04:01 PM
Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation
Golang dynamic library practice: case sharing and practical skills
Mar 01, 2024 am 08:30 AM
Golang dynamic library practice: case sharing and practical skills In Golang (Go language), using dynamic libraries can achieve functions such as modular development, code reuse, and dynamic loading. This article will introduce how to use dynamic libraries in Golang through case sharing and practical tips, and how to use dynamic libraries to improve the flexibility and maintainability of code. What is a dynamic library A dynamic library is a file that contains functions and data that can be loaded at runtime. Unlike static libraries that need to be linked into the application at compile time, dynamic libraries can be
