前端小程序代码

index.wxml:

<view class='content'>
  <view class='img-box'>
    <view class='img-list'>
      <block wx:for="{{detailPics}}" wx:key="index">
        <view class='img-item'>
          <image src='{{item}}' bindlongpress="bindlongpressimg" data-id='{{index}}'></image>
        </view>
      </block>
      <view class='chooseimg' bindtap='uploadDetailImage'>
        <view class="weui-uploader__input-box"></view>
      </view>
    </view>
    <view class='tips'>长按对应的图片即可删除</view>
  </view>
</view>

index.js:

// component/uploadImages/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: { //最多选择图片的张数，默认9张
      type: Number,
      value: 9
    },
    uploadUrl: { //图片上传的服务器路径
      type: String,
      value: ''
    },
    showUrl: { //图片的拼接路径
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    detailPics: [], //上传的结果图片集合
  },

  ready: function () {
    console.log(this.data)
  },

  /**
   * 组件的方法列表
   */
  methods: {

    uploadDetailImage: function (e) { //这里是选取图片的方法
      var that = this;
      var pics = [];
      var detailPics = that.data.detailPics;
      if (detailPics.length >= that.data.count) {
        wx.showToast({
          title: '最多选择' + that.data.count + '张！',
        })
        return;
      }
      wx.chooseImage({
        count: that.data.count, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          var imgs = res.tempFilePaths;
          for (var i = 0; i < imgs.length; i++) {
            pics.push(imgs[i])
          }
          that.uploadimg({
            url: "http://www.test.com//test-api/wechat/applet/api/uploadUserAvatar", //这里是你图片上传的接口
            path: pics, //这里是选取的图片的地址数组
          });
        },
      })

    },
    //多张图片上传
    uploadimg: function (data) {
      wx.showLoading({
        title: '上传中...',
        mask: true,
      })
      var that = this,
        i = data.i ? data.i : 0,
        success = data.success ? data.success : 0,
        fail = data.fail ? data.fail : 0;
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        name: 'file',
        formData: {"userId":"35"},
        success: (resp) => {
          wx.hideLoading();
          success++;
          var str = resp.data //返回的结果，可能不同项目结果不一样

          console.log(str);
          // var pic = JSON.parse(str);
          // var pic_name = that.data.showUrl + pic.Data;
          // var detailPics = that.data.detailPics;
          // detailPics.push(pic_name)
          // that.setData({
          //   detailPics: detailPics
          // })
        },
        fail: (res) => {
          fail++;
          console.log('fail:' + i + "fail:" + fail);
        },
        complete: () => {
          i++;
          if (i == data.path.length) { //当图片传完时，停止调用     
            console.log('执行完毕');
            console.log('成功：' + success + " 失败：" + fail);
            var myEventDetail = {
              picsList: that.data.detailPics
            } // detail对象，提供给事件监听函数
            var myEventOption = {} // 触发事件的选项
            that.triggerEvent('myevent', myEventDetail, myEventOption)//结果返回调用的页面
          } else { //若图片还没有传完，则继续调用函数
            data.i = i;
            data.success = success;
            data.fail = fail;
            that.uploadimg(data);//递归，回调自己
          }
        }
      });
    },

  }
})

后端Java代码(这里我使用的是第三方存储，如腾讯云，如果读者朋友们是使用第三方存储替换是一件很容易的事情)

核心代码如下:

@PostMapping("/uploadUserAvatar")
@ApiOperation(value = "上传用户头像", notes = "上传用户头像")
public JSONObject uploadUserAvatar(HttpServletRequest request) {

    JSONObject json = new JSONObject();
    try {

        String userId = request.getParameter("userId");

        COSClientUtil cosClientUtil = new COSClientUtil();

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 获取上传的文件
        MultipartFile multiFile = multipartRequest.getFile("file");

        
        
        String name = cosClientUtil.uploadFileCos(multiFile);

        // 获取文件路径
        String fileUrl = cosClientUtil.getFileUrl(name);
        
        Console.log("fileUrl:"+fileUrl);
        
        
        // 对文件路径进行处理
        String dbFileUrl = fileUrl.substring(0, fileUrl.indexOf("?"));
        
        
        Console.log("dbFileUrl:"+dbFileUrl);

        User user = new User();
        user.setId(Integer.parseInt(userId));
        user.setSmallAvatar(dbFileUrl);

        boolean isUploadUserAvatar = userService.updateById(user);

        if (isUploadUserAvatar) {
            json.put(ResponseUtils.CODE, ResponseUtils.SUCCESS_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.SUCCEESS_MSG);
        } else {
            json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);
        }

    } catch (Exception e) {
        e.printStackTrace();

        json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
        json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);

    }

    return json;
}

原文：https://www.cnblogs.com/youcong/p/11524006.html

1、字符串转换为数组
var string = '123,456,789';
var stringResult = string.split(',');
console.log(stringResult) //输出["123", "456", "789"]
 
var string2 = 'abcdef'
var string2Result = string2.split('')
console.log(string2Result) //输出['a','b','c','d','e','f']
string2.split(",").map(Number);//输出[123,456,789]
JSON.parse("[" + string + "]"); //输出[123,456,789]
 
2、数组转换为字符串
var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')
console.log(arrayResult) // 输出"abc,def,hig"
array.toString()//输出"abc,def,hig"

js本来有replace方法，请看w3school的说明：

　　replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：

　　stringObject.replace(regexp/substr,replacement)

　　第一个参数为一个字符串或者一个正则表达式，第二个参数为一个字符串或者一个用于生成字符串的函数。

注意重点：

　　如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

实例：

var str = "dogdogdog";
var str2 = str.replace("dog","cat");
console.log(str2);

这里仅替换第一个dog字符串，输出为：catdogdog。

js中是没有replaceAll方法的，那么如何实现替换所有匹配的字符串呢，即在js中实现replaceAll方法：

1. 使用具有全局标志g的正则表达式

var str = "dogdogdog";
var str2 = str.replace(/dog/g,"cat");
console.log(str2);

实现替换全部匹配字符串，输出结果为：catcatcat。

2. 使用另一种具有全局标志g的正则表达式的定义方法

var str = "dogdogdog";
var str2 = str.replace(new RegExp("dog","gm"),"cat");
console.log(str2);

输出结果同上例。这里g表示执行全局匹配，m表示执行多次匹配。

3. 给string对象添加原型方法replaceAll()

String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

这样就可以像使用replace方法一样使用replaceAll方法：

var str = "dogdogdog";
var str2 = str.replaceAll("dog", "cat");
console.log(str2);

输出结果同上例。
个人推荐使用第3种方法。

原文：https://www.cnblogs.com/henuyuxiang/p/11609088.html