微信小程序后台的HTTP API 上传文件功能

项目场景：

最近帮一家公司做微信小程序,采用微信云开发技术，实现后台，遇到一个上传文件的功能，一开始一直报错是提交的body格式不对，后来测试很多次才找出解决方法。

后台实现技术：微信云开发
后台管理系统：vue+element-ui

---

问题描述：

最近帮一家公司做微信小程序,采用微信云开发技术，实现后台，遇到一个上传文件的功能，一开始一直报错是提交的body格式不对，后来测试很多次才找出解决方法。

报错如下：The body of your POST request is not well-formed multipart/form-data

解决方法: 按照文档的顺序设置body数据

文档如下:

---

原因分析：

未按照文档的顺序设置body数据

---

解决方案：

1. 上传采用element-ui的upload

//代码如下
              <el-upload
                class="upload-demo"
                accept="image/*"
                :multiple="false"
                :action="uploadURL"
                :http-request="submitUpload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

2. 覆盖默认的上传行为，可以自定义上传的实现

:http-request=“submitUpload”

    submitUpload(file) {
      //使用产品id作为图片id
      let fileName = this.id + file.file.type.replace('image/','.')
      //云端存储路径
      let path = "image/brand-image/" + fileName;

      //请求临时文件上传链接（其代码下面有）
      getUploadFile(path)
        .then(res => {

          // 给数据赋值
          if (res.result.errcode != 0) {
            return this.$message.error("上传文件失败，请重新上传！");
          } else {

            //http请求body部分
            //一定要按如下顺序设置属性，此顺序与文档之一致。
            //我之前就是顺序不和文档一样，一直400 拒绝访问，显示The body of your POST request is not well-formed multipart/form-d。
            let formData = new FormData();
            formData.append("key", path);
            formData.append("Signature", res.result.authorization);
            formData.append("x-cos-security-token", res.result.token);
            formData.append("x-cos-meta-fileid", res.result.cos_file_id);
            formData.append("file", file.file);

            let url = res.result.url;
            url = url.replace(
              "https://cos.ap-shanghai.myqcloud.com",
              "/upload"
            );

            console.log("upload url", url);
            request("post", url, formData, {
              "Content-Type": "multipart/form-data"
            })
              .then(res => {
                console.log("uploadFile request res", res);


              })
              .catch(err => {
                console.log("uploadFile request err", err);
              });
          }
        })
        .catch(err => {
          console.log("err", err);
          this.$message.error("上传文件失败，请重新上传！");
        });
    },

3. getUploadFile(path)

//此处做了代理，代理处理如下
    proxyTable: {
      '/upload': {
        target: 'https://cos.ap-shanghai.myqcloud.com',   //请求地址
        changeOrigin: true, //true表示跨域
        secure: false,
        ws: true,
        logLevel: 'debug',
        pathRewrite: {
          '^/upload': ''
        }
      },
      '/api': {
        target: 'https://api.weixin.qq.com',   //请求地址
        changeOrigin: true, //true表示跨域
        secure: false,         //关闭安全检测，则可以访问没有证书的服务器
        ws: true,   //webSocket开启
        logLevel: 'debug',
        pathRewrite: {
          '^/api': ''
        }
      }
    },

/**
 * 获取上传文件链接
 * path: 上传路径
 */
export function  getUploadFile(path){
    return new Promise(function (resolve, reject) {
        var token = localStorage.getItem('accessToken')
        var url = '/api/tcb/uploadfile?access_token=' + token
        post(url,{
            env: 'env',
            path: path
        }).then(res => {
            if (res.errcode == 0) {
                resolve({
                    result: res
                })
            }
            else {
                reject({
                    error: res
                })
            }
        }).catch(err => {
            reject({
                error: err
            })
        })
    })
}

注意事项：

解决方法按照文档的顺序设置body数据