Transférer des fichiers et des données de l'applet WeChat vers le backend de démarrage de printemps en même temps (pro-test disponible)

Table des matières

1. La première méthode : l'applet WeChat utilise wx.request pour encapsuler les données fromdata et télécharger des fichiers (non recommandé)

2. La deuxième méthode : l'applet WeChat utilise wx.uploadFile pour transporter des données de données supplémentaires et télécharger des fichiers (recommandé !)

---

1. La première méthode : l'applet WeChat utilise wx.request pour encapsuler les données fromdata et télécharger des fichiers (non recommandé)

Il s'avère que le wx.request de l'applet WeChat ne peut pas publier pour soumettre le fichier téléchargé.

1. L'applet WeChat ne fournit pas l'objet fromdata (c'est-à-dire que le contenu du formulaire ne peut pas être encapsulé dans les données fromdata)

2. L'applet WeChat n'a pas d'élément de formulaire de fichier. (Si Tencent ne veut pas que nous téléchargions des fichiers via wx.request, utilisons wx.upload pour les télécharger un par un à la fois)

Forfait à partir de données : https://github.com/zlyboy/wx-formdata

const FormData = require('./formData.js')

//new一个FormData对象
let formData = new FormData();

//调用它的append()方法来添加字段或者调用appendFile()方法添加文件
formData.append("name", "value");
formData.appendFile("file", filepath);

let data = formData.getData();
//添加完成后调用它的getData()生成上传数据，之后调用小程序的wx.request提交请求
wx.request({
  url: 'https://接口地址',
  header: {
    'content-type': data.contentType
  },
  data: data.buffer,
});

2. La deuxième méthode : l'applet WeChat utilise wx.uploadFile pour transporter des données fromdata supplémentaires et télécharger des fichiers (recommandé)

Tout d'abord, l'environnement de développement par défaut ici, et https n'est pas vérifié par défaut, déployez les paramètres d'environnement - "Paramètres du projet -" cochez

L'image (that.photo) peut être obtenue via  wx.chooseImage

             wx.uploadFile({
 
                        //请求后台的路径
                    url: 'http://localhost:8001/identify/podNumSubmitAnalysisResults',
 
                    //上传的文件(照片为例)
                    filePath:that.photo,
 
                    //后台获取我们图片的key
                    name: 'img',
 
                    //额外的参数formData
                    formData: {
                        'id': 21,
                        x:{ zyh:'111'},
                        y:[1,2,3]
                    },
                    success: function (res) {
                    //上传成功

                     },
                    fail: function (res) {
                    //上传失败
                        
                    },
                })

Le backend de démarrage Spring reçoit les données : @RequestParam("img") correspond au nom du fichier : "img", et les autres données sont mappées dans la classe SubmitAnalysisResultsDto

   @RequestMapping(value = "podNumSubmitAnalysisResults")
    @RequiresRoles(value = {"teacher","student"},logical = Logical.OR)
    public HttpResult podNumSubmitAnalysisResults(@RequestParam("img")MultipartFile multipartFile, 
                SubmitAnalysisResultsDto submitAnalysisResultsDto) throws Exception {

       

        return HttpResult.ok("提交成功");
    }