tdesign的文件上传(微信小程序+idea的springboot)

这篇具有很好参考价值的文章主要介绍了tdesign的文件上传(微信小程序+idea的springboot)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1. springboot后端

1.1 FileController.java

 1.2 listener文件的ErpApplicationListener.java

1.3  【重点!】FileServiceImpl层

 1.4 IFileService

1.5 StringUtil通用类

 1.6 主程序加一个监听器

 1.7 oss是什么和怎么创建(application.yml文件)

2. 微信小程序端

2.1 TDesign的upload组件

1. app.json全局引用一下

2. wxml

3. js



1. springboot后端


具体框架如下所示:

接下来依次也是Controller层、listener层、service层、util层代码 

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

1.1 FileController.java

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java 如上图可以看到,微信小程序的请求url要传来一个type值,

controller全部代码如下,直接复制粘贴就行:

package com.huashang.controller;

import com.huashang.common.BaseController;
import com.huashang.service.IFileService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;
import java.io.OutputStream;
import java.math.BigDecimal;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;

@RestController
public class FileController extends BaseController {

	@Resource
	private IFileService fileService;

	@RequestMapping(value = "/files/{type}", method = RequestMethod.POST)
	public String uploadFile(@PathVariable String type ,HttpServletRequest request) throws Exception {
		return fileService.uploadFiles(request, type);
	}

}

 1.2 listener文件的ErpApplicationListener.java

你的主程序添加监听器

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

ErpApplicationListener代码如下:

实现了

ApplicationListener<ContextRefreshedEvent>接口

重写了

onApplicationEvent方法

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

package com.huashang.listener;

import com.huashang.service.IFileService;
import org.springframework.context.ApplicationListener;
import org.springframework.context.event.ContextRefreshedEvent;

public class ErpApplicationListener implements ApplicationListener<ContextRefreshedEvent> {

    @Override
    public void onApplicationEvent(ContextRefreshedEvent contextRefreshedEvent) {

        IFileService fileService = contextRefreshedEvent.getApplicationContext().getBean(IFileService.class);
        fileService.initClient();

    }
}

获取getBean的的IFileService.class

主要就是监听该类的调用

1.3  【重点!】FileServiceImpl层

FileServiceImpl是IFileService的实现类,先看实现类,接口放最后了

以下代码不要直接复制粘贴到serviceImpl层,是原始代码,需要修改并添加一个引用才能使用

package com.huashang.serviceImpl;

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import java.util.Objects;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSException;
import com.huashang.common.Constants;
import com.huashang.model.Alioss;
import com.huashang.service.IFileService;

import cn.hutool.core.date.DateUtil;

@Service
public class FileServiceImpl implements IFileService {

    private Alioss alioss;
    private final static List<String> FILE_TYPE = Arrays.asList("product", "biz", "color", "qa", "mes_qa", "oa", "model");

    @Autowired
    public void setAlioss(Alioss alioss) {
        this.alioss = alioss;
    }

    public static OSSClient ossClient;

    private final static Logger logger = LoggerFactory.getLogger(FileServiceImpl.class);

    @Override
    public void initClient() {
        // 实例化客户端
        logger.info("**************************初始化阿里云文件上传服务服务端--START****************************");
        ossClient = new OSSClient(alioss.getEndpoint(), alioss.getAccessKeyId(), alioss.getAcceddKeySecret());
        logger.info("**************************初始化阿里云文件上传服务服务端--END****************************");
    }

    @Transactional
    @Override
    public String uploadFiles(HttpServletRequest request, String type) throws IOException {
        String picUrl = "";
        if (request instanceof MultipartHttpServletRequest) {
            MultiValueMap<String, MultipartFile> multiMap = ((MultipartHttpServletRequest) request).getMultiFileMap();
            Set<String> keys = multiMap.keySet();
            for (String key : keys) {
                List<MultipartFile> mutiFiles = multiMap.get(key);
                for (int i = 0; i < mutiFiles.size(); i++) {
                    if (!FILE_TYPE.contains(type)) {
                        return "可以上传的文件类型:" + FILE_TYPE.toString();
                    }
                    MultipartFile file = mutiFiles.get(i);
                    String originalFilename = this.getFileOldName(file);
                    LocalDate now = LocalDate.now();
                    String dir = type + "/" + now.getYear() + "/" + now.getMonthValue() + "/" + now.getDayOfMonth() + "/";
                    String path = dir + originalFilename;
                    try {
                        ossClient.putObject(alioss.getBucketName(), path, mutiFiles.get(i).getInputStream());
                    } catch (OSSException | ClientException | IOException e) {
                        e.printStackTrace();
                    }
                    if (mutiFiles.size() - i == 1) {
                        picUrl += "https://" + alioss.getUrl() + "/" + path;
                    } else {
                        picUrl += "https://" + alioss.getUrl() + "/" + path + ",";
                    }

                }
            }
        }
        return picUrl;
    }

    @Override
    public String uploadTmpFile(String filePath, String fileName) throws FileNotFoundException {

        StringBuilder dirBuilder = new StringBuilder("tmp/");
        dirBuilder.append(DateUtil.format(new Date(), Constants.DATE_yyyyMMdd)).append("/");

        StringBuilder fileLinkBuilder = new StringBuilder();
        fileLinkBuilder.append("https://").append(alioss.getUrl()).append("/").append(dirBuilder.toString()).append(fileName);
        ossClient.putObject(alioss.getBucketName(), dirBuilder.toString() + fileName, new FileInputStream(filePath + fileName));
        return fileLinkBuilder.toString();
    }

    private String getFileOldName(MultipartFile file) {
        return Objects.requireNonNull(file.getOriginalFilename()).replaceAll("[^a-zA-Z0-9.]", "^_^");
    }
}

接下来教大家怎么修改文件

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

 看不清楚没关系,如下图片是你唯一需要修改的地方

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

以下代码直接复制粘贴到FileServiceImpl

package com.huashang.serviceImpl;

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import java.util.Objects;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;

import com.huashang.util.StringUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSException;
import com.huashang.common.Constants;
import com.huashang.model.Alioss;
import com.huashang.service.IFileService;

import cn.hutool.core.date.DateUtil;

@Service
public class FileServiceImpl implements IFileService {

    private Alioss alioss;
    private final static List<String> FILE_TYPE = Arrays.asList("product", "biz", "color", "qa", "mes_qa", "oa", "model");

    @Autowired
    public void setAlioss(Alioss alioss) {
        this.alioss = alioss;
    }

    public static OSSClient ossClient;

    private final static Logger logger = LoggerFactory.getLogger(FileServiceImpl.class);

    @Override
    public void initClient() {
        // 实例化客户端
        logger.info("**************************初始化阿里云文件上传服务服务端--START****************************");
        ossClient = new OSSClient(alioss.getEndpoint(), alioss.getAccessKeyId(), alioss.getAcceddKeySecret());
        logger.info("**************************初始化阿里云文件上传服务服务端--END****************************");
    }

    @Transactional
    @Override
    public String uploadFiles(HttpServletRequest request, String type) throws IOException {
        if(StringUtil.stringBlank(type)){
            throw new RuntimeException("type must not be empty");
        }

        if(!Arrays.asList("user", "house", "project").contains(type)){
            throw new RuntimeException("type is not supported");
        }
        StringBuilder picUrl = new StringBuilder();
        if (request instanceof MultipartHttpServletRequest) {
            MultiValueMap<String, MultipartFile> multiMap = ((MultipartHttpServletRequest) request).getMultiFileMap();
            Set<String> keys = multiMap.keySet();
            for (String key : keys) {
                List<MultipartFile> mutiFiles = multiMap.get(key);
                for (int i = 0; i < mutiFiles.size(); i++) {
                    String fileOldName = StringUtil.getFileOldName(mutiFiles.get(i));
                    String fileName = StringUtil.randomString(20) + fileOldName;
                    String dir = type + "/" + DateUtil.format(new Date(), "yyMMddHH") + "/";
                    String path = dir + fileName;
                    try {
                        ossClient.putObject(alioss.getBucketName(), path, mutiFiles.get(i).getInputStream());
                    } catch (OSSException | ClientException | IOException e) {
                        e.printStackTrace();
                    }
                    if (mutiFiles.size() - i == 1) {
                        picUrl.append("https://").append(alioss.getUrl()).append("/").append(path);
                    } else {
                        picUrl.append("https://").append(alioss.getUrl()).append("/").append(path).append(",");
                    }
                }
            }
        }
        return picUrl.toString();
    }

    @Override
    public String uploadTmpFile(String filePath, String fileName) throws FileNotFoundException {

        StringBuilder dirBuilder = new StringBuilder("tmp/");
        dirBuilder.append(DateUtil.format(new Date(), Constants.DATE_yyyyMMdd)).append("/");

        StringBuilder fileLinkBuilder = new StringBuilder();
        fileLinkBuilder.append("https://").append(alioss.getUrl()).append("/").append(dirBuilder.toString()).append(fileName);
        ossClient.putObject(alioss.getBucketName(), dirBuilder.toString() + fileName, new FileInputStream(filePath + fileName));
        return fileLinkBuilder.toString();
    }

}

 1.4 IFileService


package com.huashang.service;

import java.io.FileNotFoundException;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

public interface IFileService {
    void initClient();

    String uploadFiles(HttpServletRequest request, String type) throws IOException;

    String uploadTmpFile(String filePath, String fileName) throws FileNotFoundException;
}

1.5 StringUtil通用类


都是定义好的,复制粘贴就行

package com.huashang.util;

import java.math.BigDecimal;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Random;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

@Component("stringUtil")
public class StringUtil {

    private static final String ALL_CHARS = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

    private static final String ALL_NUMBERS = "0123456789";

    /**
     * 将换行处理为空
     *
     */
    public static String n2Null(String myString) {
        if (myString == null) {
            return myString;
        }
        String newString = null;
        Pattern CRLF = Pattern.compile("(\r\n|\r|\n|\n\r)");
        Matcher m = CRLF.matcher(myString);
        if (m.find()) {
            newString = m.replaceAll(" ");
        } else {
            newString = myString;
        }
        return newString;
    }

    public static String randomString(int length) {
        StringBuffer sb = new StringBuffer();
        Random random = new Random();
        for (int i = 0; i < length; i++) {
            sb.append(ALL_CHARS.charAt(random.nextInt(ALL_CHARS.length())));
        }
        return sb.toString();
    }

    public static String randomNumber(int length) {
        StringBuffer sb = new StringBuffer();
        Random random = new Random();
        for (int i = 0; i < length; i++) {
            sb.append(ALL_NUMBERS.charAt(random.nextInt(ALL_NUMBERS.length())));
        }
        return sb.toString();
    }

    public static boolean stringBlank(String str) {
        return str == null || "".equals(str.trim());
    }

    public static String getFileOldName(MultipartFile file) {
        return file.getOriginalFilename().replaceAll("[^a-zA-Z0-9.]", "^_^");
    }

    public static String humb2UnderLine(String s) {
        if (s == null) {
            return null;
        }

        StringBuilder sb = new StringBuilder();
        boolean upperCase = false;
        for (int i = 0; i < s.length(); i++) {
            char c = s.charAt(i);
            boolean nextUpperCase = true;

            if (i < (s.length() - 1)) {
                nextUpperCase = Character.isUpperCase(s.charAt(i + 1));
            }

            if (Character.isUpperCase(c)) {
                if (!upperCase || !nextUpperCase) {
                    if (i > 0) {
                        sb.append("_");
                    }
                }
                upperCase = true;
            } else {
                upperCase = false;
            }

            sb.append(Character.toLowerCase(c));
        }
        return sb.toString();
    }


    public static String firstImage(String images) {
        List<String> ia = imageArray(images);
        return ia.isEmpty() ? null : ia.get(0);
    }

    public static List<String> imageArray(String images) {
        List<String> is = new ArrayList<>();
        for (String i : split(images, ";")) {
            if (!"".equals(i.trim())) {
                is.add(i.trim());
            }
        }
        return is;
    }

    public static List<String> split(String images, String splitor) {
        if (images == null || "".equals(images.trim())) {
            return new ArrayList<>();
        }
        return Arrays.asList(images.split(splitor));
    }

    public static String nullString(Object obj) {
        return obj == null ? "" : obj.toString();
    }

    /**
     * 图片的字符串,将其中的eshangying的连接替换为支持https协议的简赢域名
     * http://files.eshangying.com/2015-06-03/ctgge_518h0aZN0DL._UL1500_.jpg;
     * esyfiles.lrerp.com
     */
    public static String dealImageEwin2Jy(String images) {
        if (StringUtil.stringBlank(images)) {
            return images;
        }

        images = images.replace("files.eshangying.com", "esyfiles.lrerp.com");
        return images;
    }


    /**
     * 将字符串text中由openToken和closeToken组成的占位符依次替换为args数组中的值
     *
     * @param openToken
     * @param closeToken
     * @param text
     * @param args
     * @return
     */
    public static String parseInner(String openToken, String closeToken, String text, Object... args) {
        if (args == null || args.length <= 0) {
            return text;
        }
        int argsIndex = 0;

        if (text == null || text.isEmpty()) {
            return "";
        }
        char[] src = text.toCharArray();
        int offset = 0;
        // search open token
        int start = text.indexOf(openToken, offset);
        if (start == -1) {
            return text;
        }
        final StringBuilder builder = new StringBuilder();
        StringBuilder expression = null;
        while (start > -1) {
            if (start > 0 && src[start - 1] == '\\') {
                // this open token is escaped. remove the backslash and continue.
                builder.append(src, offset, start - offset - 1).append(openToken);
                offset = start + openToken.length();
            } else {
                // found open token. let's search close token.
                if (expression == null) {
                    expression = new StringBuilder();
                } else {
                    expression.setLength(0);
                }
                builder.append(src, offset, start - offset);
                offset = start + openToken.length();
                int end = text.indexOf(closeToken, offset);
                while (end > -1) {
                    if (end > offset && src[end - 1] == '\\') {
                        // this close token is escaped. remove the backslash and continue.
                        expression.append(src, offset, end - offset - 1).append(closeToken);
                        offset = end + closeToken.length();
                        end = text.indexOf(closeToken, offset);
                    } else {
                        expression.append(src, offset, end - offset);
                        offset = end + closeToken.length();
                        break;
                    }
                }
                if (end == -1) {
                    // close token was not found.
                    builder.append(src, start, src.length - start);
                    offset = src.length;
                } else {
                    ///仅仅修改了该else分支下的个别行代码

                    String value = (argsIndex <= args.length - 1) ?
                            (args[argsIndex] == null ? "" : args[argsIndex].toString()) : expression.toString();
                    builder.append(value);
                    offset = end + closeToken.length();
                    argsIndex++;
                    
                }
            }
            start = text.indexOf(openToken, offset);
        }
        if (offset < src.length) {
            builder.append(src, offset, src.length - offset);
        }
        return builder.toString();
    }

    public static String parseWith$(String text, Object... args) {
        return parseInner("${", "}", text, args);
    }

    public static String parse(String text, Object... args) {
        return parseInner("{", "}", text, args);
    }

    /**
     * 数组指定位置插入元素
     *
     * @param after 在数组哪个元素后面  特殊: index0 代表 插入最开始
     * @param item  需要插入的元素
     * @param arr   操作的数组
     * @return 插入后的数组
     */
    public static String[] arrPushItem(String after, String item, String[] arr) {
        ArrayList<String> list = new ArrayList<>(Arrays.asList(arr));
        if (after == null) {
            list.add(item);
        } else if ("index0".equals(after)) {
            list.add(0, item);
        } else {
            int i = list.indexOf(after) + 1;
            list.add(i, item);
        }
        String[] strings = new String[list.size()];
        list.toArray(strings);
        return strings;
    }

    /**
     * 字符串转换为BigDecimal
     *
     * @param number
     * @return
     */
    public static BigDecimal string2BigDecimal(String number) {
        if (stringBlank(number)) {
            return null;
        }
        return new BigDecimal(number);
    }

    public static boolean isNumeric(String str) {
        if (stringBlank(str)) {
            return false;
        }
        return str.matches("-?[0-9]+.?[0-9]*");
    }

    /**
     * 替换掉html 标签
     *
     * @param myString
     * @return
     */
    public static String filterHtml(String myString) {
        if (myString == null) {
            return myString;
        }
        String newString = myString;
        Pattern BREND = Pattern.compile("(<br/>|<br />|<br>|<br >)", Pattern.CASE_INSENSITIVE);
        Matcher me = BREND.matcher(newString);
        if (me.find()) {
            newString = me.replaceAll("\r\n");
        }

        Pattern SPANEND = Pattern.compile("(<span/>|<span />)", Pattern.CASE_INSENSITIVE);
        Matcher se = SPANEND.matcher(newString);
        if (se.find()) {
            newString = se.replaceAll(" ");
        }

        // 过滤html标签
        Pattern pHtml = Pattern.compile("<[^>]+>", Pattern.CASE_INSENSITIVE);
        Matcher mHtml = pHtml.matcher(newString);
        if (mHtml.find()) {
            newString = mHtml.replaceAll("");
        }

        return newString;
    }

    public static String firstToLowerCase(String str) {
        if (stringBlank(str)) {
            return str;
        }
        return str.replaceFirst(String.valueOf(str.charAt(0)), String.valueOf(str.charAt(0)).toLowerCase());
    }

    public static List<String> stringArr2List(String[] stringArr) {
        List<String> resultList = new ArrayList<>();
        if (stringArr == null) {
            return resultList;
        }
        for (String string : stringArr) {
            if (StringUtil.stringBlank(string)) {
                continue;
            }
            resultList.add(string);
        }
        return resultList;
    }

    public static byte[] s2BytesUTF8(String str) {
        if (stringBlank(str)) {
            return null;
        }
        return str.getBytes(StandardCharsets.UTF_8);
    }

    /**
     * 解码
     * 编码字符串 --> 文本字符串
     * 支持对 ASCII与UNICODE混合编码的(脏文本)字符串解码
     * Eg :  "\"2ABRT3425\\u884C\\u653F\\u590D\\u8BAE\\u8868436FDGDSD\""  -->  2ABRT3425行政复议表
     *
     * @param unicode
     * @return
     */
    public static String unicodetoString(String unicode) {
        if (unicode == null || "".equals(unicode)) {
            return null;
        }
        StringBuilder sb = new StringBuilder();
        for (int pos = 0; pos < unicode.length(); ) {
            //"\"2ABRT3425\\u884C\\u653F\\u590D\\u8BAE\\u8868436FDGDSD\"";
            //System.out.println("pos:"+unicode.substring(pos,pos+1)+" - "+pos);
            //System.out.println("index:"+unicode.indexOf("\\u", pos)+"\n");
            if (unicode.indexOf("\\u", pos) - pos == 0) {//unicode编码 Eg: \\2435
                //System.out.println("pos2:"+unicode.substring(pos,pos+6));
                if (pos + 6 <= unicode.length()) {
                    Character ch = (char) Integer.parseInt(unicode.substring(pos + 2, pos + 6), 16);
                    //System.out.println("char:"+ch);
                    sb.append(ch);
                    pos += 6;
                } else {// \\u
                    sb.append(unicode, pos, pos + 2);
                    pos += 2;
                }
            } else {//非unicode编码
                sb.append(unicode.charAt(pos));
                pos += 1;
            }
        }
        return sb.toString();
    }

    public static boolean integerBlank(Integer integer) {
        return integer == null || integer <= 0;
    }
}

 1.6 主程序加一个监听器

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

package com.huashang;

import com.huashang.listener.ErpApplicationListener;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.EnableAspectJAutoProxy;
import org.springframework.scheduling.annotation.EnableAsync;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@SpringBootApplication
@EnableAsync
@EnableScheduling
@EnableTransactionManagement
@EnableAspectJAutoProxy(proxyTargetClass = true)
@MapperScan("com.huashang.mapper")
@ComponentScan("com.huashang")
public class ErpApplication {
	public static void main(String[] args) {
		SpringApplication springApplication = new SpringApplication(ErpApplication.class);
		// 添加监听器,执行需要在服务启动时执行的业务逻辑
		springApplication.addListeners(new ErpApplicationListener());
		springApplication.run(args);
	}

}

 1.7 oss是什么和怎么创建(application.yml文件)


只需要修改一下这里就行,是你oss的配置,我这里是阿里的oss

 oss是什么和怎么创建看视频就行:

如何使用OSS控制台、ossutil、ossbrowser、OSSSDK_对象存储 OSS-阿里云帮助中心 (aliyun.com)

创建好了以后,对

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

以上2个文件都进行以下修改

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: 'lrerp'
    password: 'By*****23'
    url: jdbc:mysql://pc-uf6fv9vxz81ws1y53.rwlb.rds.aliyuncs.com:3306/lingrong?useUnicode=yes&characterEncoding=UTF8&useSSL=false&serverTimezone=Asia/Shanghai
  servlet:
    multipart:
      enabled: true
      max-file-size: 10MB
      max-request-size: 20MB
  aop:
    auto: true

cross:
  origin: 'lrerp.com'

audience:

  clientId: cbde72f64*****************00d3b

  base64Secret: ZWExZjcxNzFi*********E2NGUwZTEzZjgxYmRkMzU=

  name: restapiuser

  expiresSecond: 172800000
liteflow:
  print-banner: false
  rule-source-ext-data-map:
    driverClassName: com.mysql.cj.jdbc.Driver
    username: 'lrerp'
    password: '******3'
    url: jdbc:mysql://pc-uf6fv9vxz81ws1y53.rwlb.rds.aliyuncs.com:3306/lingrong?useUnicode=yes&characterEncoding=UTF8&useSSL=false&serverTimezone=Asia/Shanghai
    applicationName: lingrong

    chainTableName: chain
    chainApplicationNameField: application_name
    chainNameField: chain_name
    elDataField: el_data


alioss:
  url: file.lrerp.com
  endpoint: http://oss-cn-shanghai.aliyuncs.com
  accessKeyId: LT#****************PPM
  acceddKeySecret: UVg***************C6L
  bucketName: lrerp

2. 微信小程序端


2.1 TDesign的upload组件


TDesign的upload组件 (tencent.com)https://tdesign.tencent.com/miniprogram/components/uploadtdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

1. app.json全局引用一下

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

2. wxml

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

如图可以看到mediaType中我只保留了模版中的image,bind:add事件我定义了一个handleCertificateAdd(),用于上传我的房屋产权图片,max修改为0,可以上传任意个图片

3. js

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

js页面主要修改了

1. data的数据:

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

定义一个数组 `certificateList:[ ]`就行

2. 【重点!】uploadFile(file,updateProgress,updateSuccess)方法

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

 token

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

这个token就是数据库中的token的值 

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

3. handleCertificateAdd()方法

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

 遍历上传的所有图片,通过调用上面的uploadFile方法

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

下面来分析这几个红框中的代码

1. 

      this.setData({
        certificateList: [...(this.data.certificateList), {
          ...file,
          status: 'loading'
        }],
      });

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

2.  

每个file都遍历调用uploadFile(file,updateProgress,updateSuccess)方法实现上传,

把方法体作为参数,回调,

方框中的方法,是uploadFile(file,updateProgress,updateSuccess)中的updateProgress参数

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

可以看到task的返回值参数res.progress为100

3.  

 (ue) => {
          console.log('certificateList:' + ue)
          this.setData({
            [`certificateList[${length}].status`]: 'done',
            [`certificateList[${length}].remoteUrl`]: ue.data
          });
        }

如下图 方框中的方法,就是作为uploadFile(file,updateProgress,updateSuccess)中的updateSuccess参数tdesign 微信小程序,tdesign,微信小程序,intellij-idea,spring boot,java

[`certificateList[${length}].status`]: 'done'

就是把图片的status属性设置为done,图片显示出来不会一直转圈文章来源地址https://www.toymoban.com/news/detail-772500.html

到了这里,关于tdesign的文件上传(微信小程序+idea的springboot)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序在TS模板下引入TDesign组件

    TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库 新建一个空白项目,这里可以选择TS-基础模板 新建项目目录结构如图所示: 注意这里其实小程序的文件都存放在miniprogram文件夹下,因此我们后续安装npm包时需要进入miniprogram文件

    2024年02月03日
    浏览(57)
  • 微信小程序入门学习02-TDesign中的自定义组件

    我们上一篇讲解了TDesign模板的基本用法,如何开始阅读模板。本篇我们讲解一下自定义组件的用法。 官方模板在顶部除了显示图片外,还显示了一段文字介绍。文字是嵌套在容器组件里,先按照他的写法复制代码到我们自己创建的index.wxml文件里 因为我们的布局是从上到下,

    2024年02月10日
    浏览(66)
  • 微信小程序(typescript) npm添加Tdesign UI组件库

    最近,发现一个新的微信小程序UI组件库-TDesign。腾讯自家出品,颜值杠杆。网址如下: https://tdesign.tencent.com/miniprogram/getting-started 使用NPM Node.js 安装包及源码下载地址为:https://nodejs.org/zh-cn/download/ Node.js 菜鸟教程网址:https://www.runoob.com/nodejs/nodejs-install-setup.html 检查npm是否安

    2024年01月16日
    浏览(47)
  • 微信小程序上传手机内部文件,PC文件

    看了太多人的文档,拆开,组合,终于成功完成了这个写法,从上周五,到今天周三,共花5天解决这个问题。 不需要任何所谓的网络上传(浪费我好几天),不需要跨域,不需要token。 我大方,共享给大家,直接贴代码(调用web-view): const AdminBiz = require(\\\'../../../biz/admi

    2024年02月15日
    浏览(51)
  • 微信小程序是如何上传文件以及下载文件

    微信小程序可以使用wx.uploadFile() API来上传文件,使用wx.downloadFile() API来下载文件。 上传文件的步骤如下: 1、创建一个选择文件的按钮。 2、用户点击按钮后,调用wx.chooseImage()方法来选择文件。 3、调用wx.uploadFile()方法上传文件。 示例代码如下: 下载文件的步骤如下: 1、创

    2024年02月11日
    浏览(51)
  • 微信小程序通过npm引入tdesign包进行构建的时候报错

    问题 在通过npm 引入 tdesign时:https://tdesign.tencent.com/miniprogram/getting-started 通过微信小程序IDE进行npm构建的时候出现:无法构建,应该怎么办? 解决方法: 1 输入: 命令 2 重新点击工具-npm构建 这个时候,黑框出现一段Json,同时提示构建成功,即可开始使用tdesign了!

    2024年02月10日
    浏览(45)
  • uniApp、微信小程序上传单个文件及多个文件

    使用官方api - uni.uploadFile 这是单个文件上传写法 这是上传多个文件写法 由于没有多个上传文件的方法,目前只能通过遍历的方式来进行多文件上传

    2024年04月16日
    浏览(53)
  • 【小程序教程】微信小程序之Upload文件上传

    一、概述 微信小程序是一种基于移动互联网技术的轻应用,提供了许多内置的功能和API,可以方便地实现各种应用开发。其中,文件上传是一项非常常见的功能,小程序提供了upload API用于文件上传。今天,我们就来探讨一下如何使用微信小程序的upload API进行文件上传。 二、

    2024年02月05日
    浏览(36)
  • 微信小程序云存储(文件上传到云端)

      我们直到,云开发控制台更多的是对项目中的初始文件的操作管理,例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作,例如用户上传图片的操作,这时就需要用到云开发存储API。   小程序云开发提供了一系列存储操

    2024年02月09日
    浏览(43)
  • 微信小程序文件上传无响应解决方法

    今天更新了下小程序,发现文件上传无法拉起拍照或者选择照片,点击上传按钮,没有反应,也没有任何报错,顿时就一顿蒙蔽。最后灵机一动想起了,微信最近更新了隐私协议,文件上传需要用到 这些接口,而这些接口都是需要先在隐私协议中声明,才可以使用的,最终我

    2024年02月06日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包