微信小程序上传图片和文件

1.从微信里选择图片或文件上传

使用的vant的上传组件  原生用 wx.chooseMessageFile()

html

max-count 是限制上传图片数量 可以不设置该属性

 

 

 js

// 从微信选择上传文件
  afterRead(e) {
    let that = this
    console.log("上传的文件：", e.detail.file);
    wx.uploadFile({
      accept: "all",
      url: 'http://www.com/upload', // 仅为示例，非真实的接口地址
      filePath: e.detail.file.url,
      name: 'file',
      header: {
        'token': wx.getStorageSync("token"),// 请求需要token就带，不需要就删除
      },
      success(res) {
        console.log(res);
        let data = JSON.parse(res.data)
        data.data.name = e.detail.file.name
        if (data.code == 1) {
          wx.showToast({
            icon: 'none',
            title: '上传成功！',
            duration: 2000
          })
          // 上传完成需要更新 fileList
          let file = that.data.file
          file.push(data.data)
          that.setData({
            file
          })
          console.log(that.data.file);
        } else {
          wx.showToast({
            icon: 'none',
            title: '上传失败！',
            duration: 2000
          })
        }
      },
    });
  },
  // 删除上传文件
  deleteAll(e) {
    console.log(e);
    let filearr = this.data.file
    filearr.splice(e.detail.index, 1)
    this.setData({
      file: filearr
    })
    console.log(this.data.file);
  },

2.从相册选择图片上传

html 

js

// 删除上传文件
  deleteAll(e) {
    console.log(e);
    let filearr = this.data.file
    filearr.splice(e.detail.index, 1)
    this.setData({
      file: filearr
    })
    console.log(this.data.file);
  },
  // 从相册选择图片
  pushimg() {
    let that = this
    wx.chooseImage({ // 本地资源上传到服务器API
      success: function (e) {
        console.log(e);
        var tempFilePaths = e.tempFilePaths;
        wx.uploadFile({
          accept: "all",
          url: 'http://www.com/upload', // 指定服务器接口URL
          filePath: tempFilePaths[0], // 本地文件路径，即选择文件返回的路径
          header: {
            'token': wx.getStorageSync("token"),// 请求需要token就带，不需要就删除
          },
          name: 'file', // 上传文件的key，后台要用到
          success: function (res) { //成功后的回调函数
            console.log(res);
            let data = JSON.parse(res.data)
            data.data.name = new Date()
            if (data.code == 1) {
              wx.showToast({
                icon: 'none',
                title: '上传成功！',
                duration: 2000
              })
              // 上传完成需要更新 fileList
              let file = that.data.file
              file.push(data.data)
              that.setData({
                file
              })
              console.log(that.data.file);
            } else {
              wx.showToast({
                icon: 'none',
                title: '上传失败！',
                duration: 2000
              })
            }
          }
        })
      }
    })
  },

less 

.img {
  position: relative;
  width: 80px;
  margin-right: 15rpx;
  overflow: hidden;
  image {
    width: 100%;
  }

  .del {
    color: #ffffff;
    background-color: #000000;
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    text-align: center;
    top: -13rpx;
    right: -13rpx;
    border-radius: 50%;
    z-index: 99;
    font-size: 20rpx;
    padding-top: 10rpx;
    padding-right: 10rpx;
    box-sizing: border-box;
  }
}